Kimkorng

Quick Start Guide to SCSS

05 APR, 2024

What is SCSS?

[read] SCSS is a syntax of SASS (Syntactically Awesome Style Sheets) which is an extension of CSS and make us to writing CSS more efficient and organized.

Setup SCSS

Install Node.js and npm: download and install them from nodejs.org if you don't have Node and npm installed yet. * You also can check if node.js is installed or not in you machine with this command: shell node --version * If Node.js is installed, it will display the version number.

Start project:

shell
mkdir my-scss-project
cd my-scss-project
npm init -y

Installing SASS:

shell
npm install sass

Using SCSS

Create SCSS files: Create a file named scss/styles.scss in your project root directory:

scss
$primary-color: #3498db;

body {
  font-family: 'Fira code', sans-serif;
  background-color: $primary-color;
  color: white;

  h1 {
    font-size: 20px;
    text-align: center;
  }

  p {
    font-size: 16px;
    line-height: 1.5;

    &.important {
      font-weight: medium;
    }
  }
}

Compile SCSS to CSS: To compile scss/styles.scss to styles.css we use the following command:

shell
npx sass --watch scss/styles.scss:dist/css/styles.css
# npx sass inputFile outputFile

Our project structure might look like this

plaintext
my-scss-project/
├── dist/
│   └── css/
│       └── styles.css
├── node_modules/
├── scss/
│   └── styles.scss
├── package.json
└── index.html

Watch SCSS files: Recompile your SCSS files automatically when it change, we use:

shell
npx sass --watch styles.scss:styles.css

Link compiled CSS in HTML: Link the compiled CSS file in your HTML:

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SCSS - By Kimkorng</title>
  <link rel="stylesheet" href="dist/css/styles.css">
</head>
<body>
  <h1>Hello, SCSS!</h1>
  <p>This is a paragraph.</p>
  <p class="important">This is an important paragraph.</p>
</body>
</html>

Key Features

Variables:

scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Nesting:

scss
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    text-decoration: none;
  }
}

Partials and Import: Split your SCSS into smaller files and import them.

scss
// _reset.scss
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

// styles.scss
@import 'reset';
body {
  font-family: Arial, sans-serif;
}

Mixins:

scss
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
          border-radius: $radius;
}

.box { @include border-radius(10px); }

Extend/Inheritance:

scss
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success { @extend .message; border-color: green; }
.error { @extend .message; border-color: red; }
.warning { @extend .message; border-color: yellow; }
SHARE