The definitive guide to SCSS
Tags: css, sass, scss
Published: 2020-02-19 18:00:01

---
title: The definitive guide to SCSS
published: true
date: 2020-02-17 17:00:33 UTC
tags: css,sass,scss
canonical_url: https://blog.logrocket.com/the-definitive-guide-to-scss/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xdw2y472t8vaowfo2fuw.png
---
**Written by [Supun Kavinda](https://blog.logrocket.com/author/supunkavinda/)**✏️

Initially, frontend development was all about writing HTML, CSS, and JavaScript. However, over the last decade or so, it has become [more complex](https://blog.logrocket.com/the-increasing-nature-of-frontend-complexity-b73c784c09ae/) and ever more interesting. The field’s continuous evolution has made it increasingly critical to stay on top of the latest frontend technologies and learn how to build websites more efficiently.

In this guide, we’ll demonstrate how to use SCSS — think of it as a way to write CSS with superpowers. I’ve broken it into three sections:

1. Introduction to SCSS
2. SCSS language syntax
3. Using SCSS in real-world applications

If you already know the language and just want to learn how to use it in your application, feel free to jump to the third section.

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## 1. Introduction to SCSS (and Sass)

Officially described as “[CSS with superpowers](https://sass-lang.com/),” SCSS (or Sass) offers a way to write styles for websites with more enhanced CSS syntax. In general, browsers do not know how to process SCSS features, such as functions, mixins, and nesting. We’ll need to convert them to regular CSS files to run them in the browser.

### What’s the difference between SCSS and Sass?

This is where most beginners get confused. SCSS and Sass are two syntax flavors for the same concept. [The difference between them is UI](https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass/5732683#5732683).

<table class="table-top-header" data-ace-table-col-widths="372;372">
<tbody>
<tr>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span style="text-decoration: underline;"><strong><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">SCSS</span></strong></span></div>
</td>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span style="text-decoration: underline;"><strong><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">Sass</span></strong></span></div>
</td>
</tr>
<tr>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">Stands for Sassy CSS</span></div>
</td>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span class="inline-code author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">Stands for Syntactically Awesome Style Sheets</span></span></div>
</td>
</tr>
<tr>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">Similar to CSS</span> <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z h-lparen">(</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz87z6z70zbqvqm3z65z7pz75zz71znmoz69zdz66zhz81zqz69znffz88zkz90z h-lparen">u</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z h-lparen">ses</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z"> curly braces and semicolons)</span></div>
</td>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">Uses strict indentation</span> <span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z h-lparen">(like</span><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z"> Python)</span></div>
</td>
</tr>
<tr>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">Any valid CSS is valid SCSS</span></div>
</td>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><span class=" author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z">CSS code cannot be used as SASS</span></div>
</td>
</tr>
<tr>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><code class=" prettyprinted" style=""><span class="pun">.</span><span class="pln">scss</span></code> extension</div>
</td>
<td>
<div class="ace-line gutter-author-d-1gg9uz65z1iz85zgdz68zmqkz84zo2qoxuz77zbaz88zn79jxz71zbz76zz77zfz72zrz79zz72zz70ziz73zwctz72zz76z2ksz81z ace-ltr" dir="auto" style="text-align: center;"><code class=" prettyprinted" style=""><span class="pun">.</span><span class="pln">sass</span></code> extension</div>
</td>
</tr>
</tbody>
</table>

Here’s an example of SCSS:

```jsx
body {
  background-color:#000;
  color:#fff;
}
```

Below is an example of Sass:

```jsx
body
  background-color:#000;
  color:#fff;
```

It’s up to you to choose one. Don’t stress on the decision — you can easily convert SCSS to Sass and vice versa with the `sass-convert` tool.

In this article, I’ll focus on SCSS mainly for two reasons.

1. SCSS syntax is similar to CSS. Hence, it is easy to explain the advancements for someone who already knows CSS.
2. Once you know SCSS, it takes only several minutes to learn SASS. (Reminder: Both share the same concept.)

### Why SCSS?

TL;DR: CSS is not strong enough.

CSS is cool, but not quite cool enough. The creators of SCSS had a lot of ideas to make developers’ lives easier and decided to build them into an entirely new language. Actually, to be clear, Sass was the original version of this new language; SCSS is an improved version they created later.

### How to use SCSS in your website

Unfortunately, the features of SCSS have yet to be introduced in the [CSS specs](https://www.w3.org/Style/CSS/specs.en.html) and, therefore, are not supported by browsers. To run SCSS code in a web browser, you must first convert it to CSS. We’ll discuss tools you can use for this and how to automate the process later.

## 2. SCSS language syntax

For this section, I’ll assume you already have some experience with CSS. I’ll introduce features of SCSS one by one and explain the syntax of each.

### The structure of SCSS rules

The structure of SCSS follows that of CSS. First, choose one or more elements using IDs, classes, or other [CSS selectors](https://www.w3schools.com/cssref/css_selectors.asp). Then, add styles.

In this example, we select the elements with `button` class and add some properties. This is valid as CSS code as well as SCSS code. It’s important to note that SCSS supports all [CSS properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference).

```jsx
.button {
  display:inline-block;
  font-size:14px;
  padding:4px 10px;
}
```

### Comments in SCSS

Both `//` (single-line) and `/* */` (multi-line) comments are allowed in SCSS.

```jsx
// this is a single-line comment

/* this is a multi-line comment */
```

Now let’s go over the basic enhancements of SCSS. We’ll discuss how to compile SCSS to CSS in the final section. For now, you can use [CodePen](https://codepen.io/) to write and test your code. Make sure you select SCSS as the preprocessor in CSS settings.

For the examples below, I’ll use a simple anecdote in which you are using SCSS while your super cool, old-school developer grandpa struggles with CSS. Let’s get started!

### Nesting

Your grandpa styled his navbar like this with CSS:

```jsx
nav {
  background-color:#333;
  padding:1em;
}
nav ul {
  margin:0;
  padding:0;
  list-style:none;
}
nav ul li {
  display:inline-block;
}
```

But you can do so with SCSS, like this:

```jsx
nav {
  background-color:#333;
  padding:1em;
  ul {
    margin:0;
    padding:0;
    list-style:none;
    li {
      display:inline-block;
    }
  }
}
```

Much more organized and concise, right? You have two major advantages over your grandpa:

1. You know that all the styles of `nav` and its children are between curly braces, so you don’t need to find them in the file or in multiple files
2. You simply write less code, so there is no repetition

Keep in mind, however, that when you go much deeper with nesting, the CSS file can become much larger and browsers will need to do more work to style the elements. Try to keep the selectors shallow. For example, we can save several bytes by taking the styles of `li` to the outer scope.

```jsx
nav {
  background-color:#333;
  padding:1em;
  ul {
    margin:0;
    padding:0;
    list-style:none;
  }
  li {
    display:inline-block;
  }
}
```

For larger projects, this can save a huge amount of bandwidth.

It’s important to make sure this process doesn’t create any conflicts. For example:

```jsx
content {
  ul {
    li {
      font-style:italic;
    }
  }
  ol {
    li {
      font-decoration:underline;
    }
  }
}
```

In this case, we cannot bring the styles of `li` elements to the outer scope because they have different rules.

Here’s the bottom line: nesting makes code more clear, organized, and concise, but be careful not to overuse it.

### Using _`&`_ in nesting

Your grandpa shows off his magical button that changes color when you hover over it. His CSS code looks like this:

```jsx
button {
  background-color: #535353;
  color: #000;
}
button:hover {
  background-color: #000;
  color: #fff;
}
```

You can achieve the same effect much more easily with SCSS by using the `&` character in nesting.

```jsx
button {
  background-color: #535353;
  color: #000;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}
```

`&` always refers to the upper selection. Below are some use cases.

```jsx
.some-class {
  &:hover {
    /* when hovered */
  }
  &:focus {
    /* when focused */
  }
  & > button {
    /* selector equls to .some-class > button */
  }
  &-cool {
    /*** Notice this! ****/
    // selects .some-class-cool elements
  }
}
```

### Variables

Variables store data. In SCSS, you can save any [CSS value](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units) (even with units) in variables. Variables are defined using the `$` symbol.

Variable declaration:

```jsx
$my-font: Nunito, sans-serif;
$my-font-color: #ffd969;
$content-width: 660px;
```

Variable usage:

```jsx
body {
  font-family: $my-font;
  color: $my-font-color;
  content {
    width: $content-width;
  }
} 
```

When Sass is converted to CSS, all the variables are replaced with their original values. SCSS variables are useful to keep fonts, colors, and other values consistent thought a website or web app.

### The difference between SCSS and CSS variables

SCSS variables are replaced with values when converted into CSS variables. These conversions take place before they are served to the browser, so browsers don’t even know there were variables in the first place, they just see the values. On the other hand, [CSS variables](https://blog.logrocket.com/how-to-create-better-themes-with-css-variables-5a3744105c74/) are much more powerful.

[CSS Tricks](https://css-tricks.com/difference-between-types-of-css-variables/#) outlined several advantages of CSS variables:

- They cascade; you can set a variable inside any selector to set or override its current value
- When a variable’s value changes (e.g., media query or another state), the browser repaints as needed
- You can access and manipulate variables in JavaScript

```jsx
$my-global-variable: "I'm global";
div {
$my-local-variables: "I'm local";
}
```

Does that mean Grandpa wins? Not exactly: you can use CSS variables in SCSS stylesheets, since any valid CSS is also valid SCSS. If you’re curious about CSS variables, you can learn more [here](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).

### SCSS variable scope

Some things to keep in mind:

- All variables defined in the top level are global
- All variables defined in blocks (i.e., inside curly braces) are local
- Blocks can access both local and global variables$my-global-variable: “I’m global”;  
div {  
$my-local-variables: “I’m local”;  
}

### Changing the values of SCSS variables

Changing values is done in the same way as declaring. When you change a variable, subsequent uses will have the new value while the previous uses remain unchanged.

```jsx
$color: #fefefe;
.content {
  background-color: $color;
}

$color: #939393;
.footer {
  background-color: $color;
}
```

Here, `.content` will have the background color `#fefefe` while `.footer` will have `#939393`. Global variables won’t change unless we add the `!global` modifier.

```jsx
$color: #111;
.content {
  $color: #222; // this is a new local variable
  background-color: $color; # 222
}
.footer {
  $color: #333 !global; // changes the global variable  
}
```

### Mixins

Let’s outdo your grandfather’s CSS again, this time with mixins.

A mixin is a group of CSS declarations that can be reused. The syntax is similar to [functions in JavaScript](https://dev.to/bnevilleoneill/methods-for-defining-functions-in-javascript-55nc). Instead of the `function` keyword, use the `@mixin` directive. You can have arguments too. Calling the mixin is done via the `@include` statement.

Here’s how to use mixins to position elements to absolute center:

```jsx
@mixin absolute-center() {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}
.element-1 {
  @include absolute-center();
}
.element-2 {
  @include absolute-center();
  color:blue;
}
```

First, we defined the `absolute-center` mixin. Then, we used it in multiple blocks.

### Mixins with arguments

Below is an example of how to use arguments in mixins.

```jsx
@mixin square($size) {
  width:$size;
  height:$size;
}
div {
  @include square(60px);
  background-color:#000;
}
```

### Mixins with optional arguments

Optional arguments can be defined in the same way we declared SCSS variables.

```jsx
@mixin square($width: 40px) {
  width:$size;
  height:$size;
}
```

### Mixins with content blocks

Instead of arguments, we can send CSS rules to the mixins. Those rules can be used in the mixin using `@content`.

```jsx
@mixin hover-not-disabled {
  &:not([disabled]):hover {
    @content;
  }
}
.button {
  border: 1px solid black;
  @include hover-not-disabled {
    border-color: blue;
  }
}
```

This approach allows us to reduce the repetition of the `&:not([disabled]):hover` part.

### Importing SCSS (`@import` and `@use`)

Chunking code is an important practice when creating larger apps. Your grandpa can do this by creating multiple CSS files and adding them all to the HTML document.

```jsx
<link rel="stylesheet" href="/path/to/css/1"></link>
<link rel="stylesheet" href="/path/to/css/2"></link> 
<link rel="stylesheet" href="/path/to/css/3"></link> 
<link rel="stylesheet" href="/path/to/css/4"></link> 
<link rel="stylesheet" href="/path/to/css/5"></link>
```

Grandpa’s process is tedious. It requires the browser to make many HTTP requests, which may slow down his website.

SCSS is much better because it enables you to combine chunked files before sending the code to the browser. That way, you only need to link only one CSS file (which is usually named `something.bundle.css`).

### `@import`

The examples below demonstrate how to chunk files and import them into one parent file using `@import`.

`normalize.scss`:

```jsx
body {
  padding:0;
  margin:0;
}
body, html {
  width:100%;
  min-height:100%;
}
```

`styles.scss`:

```jsx
@import 'normalize';

content {
  max-width:660px;
  // and more styles
}
```

Assuming that both `normalize.scss` and `styles.scss` are in the same folder, we can import one to another, as shown above.

When using `@import`, all the variables, mixins, etc. become globally accessible, which is a problem when you have complex file structures and use libraries. For this reason, [using `@import`is now officially discouraged](https://sass-lang.com/documentation/at-rules/import).

The solution is `@use`.

### `@use`

The basic usage of `@use` is the same as that of `@import`.

`styles.scss`:

```jsx
@use 'normalize';

// other styles
```

Files imported with `@use` are called modules. To use mixins or variables of these modules, we have to call them using namespaces. By default, the namespace is the filename (without the extension).

`src/_colors.scss`:

```jsx
$accent-color: #535353;
@mixin dark-background {
  background-color:#000;
  color:#fff;
}
```

`styles.scss`:

```jsx
@use 'src/colors';
body {
  color: colors.$accent-color;
}
.dark-region {
  @include colors.dark-background;
}
```

You can also use a custom namespace using `as`.

```jsx
@use 'src/colors' as c;
body  {
  color: c.$accent-color;
}
```

When `_` is prepended to a file name of a SCSS file, the parser knows that it is a partial file and it is there only for importing. When importing, the `_` part is optional. Note that we used `src/colors` to import `src/_colors.scss`.

### Arithmetic operators

You can do some math in SCSS without Grandpa’s CSS `calc()` function. You can use `+,-,/,*,%`, direct values, and variables for calculations.

```jsx
$content-width: 600px;
content {
  width:$content-width;
}
.inner-content {
  width: $content-width - 60px; // substraction
}
.outer-content {
  width: $content-width + 60px; // addition
}
```

### Flow control rules

There are four types of flow control rules: `@if` /`@else`, `@each`, `@for`, and `@while`.

`@if` and `@else`– are similar to `if` and `else` in JavaScript.

```jsx
// ex: using in mixins
@mixin theme($is-dark: false) {
  @if $is-dark {
    // styles for dark
  }
  @else {
    // styles for light
  }
}
```

`@each` is similar to `for of` in JavaScript.

```jsx
// creating automated 
$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}
```

Note: The `#{$size}` notation is used to make dynamic property names and selectors using variables. This is called [interpolation](https://sass-lang.com/documentation/interpolation).

`@for` is similar to `for` loops in JavaScript.

```jsx
@for $i from 1 through 4 {
  .bubble-#{$i} {
    transition-delay: .3 * $i;
  }
}
```

`@while` (not often used) is similar to `while` loops in JavaScript.

By this point, you’ve learned the definition and history of SCSS, how it works, the difference between SCSS and Sass, and the SCSS language syntax. Now it’s time to actually create something to prove that your SCSS is better than your grandpa’s CSS.

## 3. Using SCSS in real-world applications

In this part, we’ll demonstrate two ways to compile Sass into CSS.

Before we get started, we have to install the `sass` command line, which is the easiest tool to preprocess CSS. If you’re using npm, use the following code.

```jsx
npm i -g sass
```

Check the [installation guide](https://sass-lang.com/install) for some additional ways to install the `sass` command line.

With the `sass` command line, you can parse both `.scss` and `.sass` files into `.css`. It automatically detects SCSS and Sass files by extension and uses the correct parser.

```jsx
sass source.scss destination.css
```

### Designing a simple blog page with SCSS

To demonstrate the `sass` command line and to review the concepts outlined above, let’s design a simple blog with one component: content (we’ll skip the header and footer to make it clearer).

First, create a folder on your local machine (I named it `my-blog`) and navigate there.

```jsx
cd /path/to/my-blog
```

Then, create two more folders.

```jsx
mkdir source build
```

We’ll place the `.scss` files in the `source` folder and preprocessed `.css` files in the `build` folder.

Next, create an `index.html` file in the root, open it in your favorite text editor, and add some HTML code.

```jsx
<!-- index.html -->
<html>
<head>
    <link rel="stylesheet" href="build/index.css">
</head>
<body>
    <content>
        <content>
            Blog content goes here
        </content>
    </content>
</body>
</html>
```

Now it’s time to create our new SCSS files. Our main file will be `source/index.scss`, and it will include other files.

To start writing SCSS, we’ll set up a watcher to compile `source/index.scss` into `build/index.css` in real time. Use the `--watch` option in the `sass` command line.

```jsx
sass --watch source/index.scss build/index.css
```

Finally, create the chunked SCSS files.

```jsx
// index.scss
@use 'normalize';

@use 'Content';
@use 'Footer';

body {
    background-color:#fafafa;
    font-family: Segoe UI, sans-serif;
}


// _normalize.scss
body, html {
    margin:0;
    padding:0;
}
* {
    box-sizing:border-box;
}
content {
    display:block;
}


// _colors.scss
$content-box: #fff;
$footer: #222;
$footer-font: #fff; 
```

To recognize them easily, I name components’ style files in the `Content.scss` format.

```jsx
// Content.scss
@use 'colors' as colors;
body > content {
    padding:40px;
    margin:auto;
    width:660px;
    max-width:100%;
    & > content {
        background-color: colors.$content-box;
        min-height:600px; // to look cool
        border-radius:20px;
        box-shadow:10px 10px 40px rgba(0,0,0,0.06);
        padding:40px;
    }
}
```

Now that we’ve created a basic blog page, let’s add some media queries.

### Adding Media Queries

Let’s say we need to remove the padding of the parent `<content>` element in mobile devices (`<600px`). We can do that it in two ways.

The conventional CSS way is to add media queries globally.

```jsx
@media screen and (max-width:600px) {
  body > content {
    padding:0;
  }
}
```

The SCSS way is to add media queries inside selectors.

```jsx
body > content {
  @media screen and (max-width:600px) {
      padding:0;
  }
}
```

Both methods are valid; you can use whichever you prefer. Some developers save all media queries in a single file (e.g., `Mobile.scss`).

### SCSS with webpack or Gulp

While the `sass` command line is straightforward and easy to use, if you are using a bundler like [webpack](https://webpack.js.org/) or [Gulp](http://zetcode.com/gulp/sass/), you can use plugins to parse SCSS to CSS on bundling. Check out the following guides for each bundler. One advantage of a bundler is that you can use it to parse, autoprefix, and minify at the same time.

## Conclusion

You should now understand the basics of SCSS and how it is used in the real world. We’ve discussed the most widely used features of SCSS, but I encourage you to look over the [SASS documentation](https://sass-lang.com/documentation) for a deeper dive. Once you’re comfortable with the SCSS, you may want to look into [built-in SCSS modules](https://sass-lang.com/documentation/modules), which can make your life much easier when creating complex applications.

As for your super-cool developer grandpa — tell him to get with the times and switch over to SCSS.

* * *
## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, [try LogRocket.](https://logrocket.com/signup/) 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/403rye2ptzx994uhktk1.png)

[LogRocket](https://logrocket.com/signup/) is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — [Start monitoring for free.](https://logrocket.com/signup/)
* * *

The post [The definitive guide to SCSS](https://blog.logrocket.com/the-definitive-guide-to-scss/) appeared first on [LogRocket Blog](https://blog.logrocket.com).