SCSS Introduction 🎨
Tags: css, productivity, codenewbie, webdev
Published: 2020-10-07 16:29:39

*NOTE: I am only working with SCSS syntax in this little guide but SASS and SCSS are extremely similar and pretty much every example work for both.*

I know about [SASS](https://sass-lang.com/) for a while but I did not dive into because I thought pure CSS was doing the job well enough.

After a couple of weeks using SCSS, here is my personal opinion. Pure CSS is enough **but** once you worked with SCSS it is really frustrating to write CSS code again ...

SCSS brings cool features on the table that make our lives as Front-End developers easier and I wanted to write a quick introduction for anyone interested to get started.

##Setup

Unfortunately, browsers do not understand SCSS, before your SCSS code can be used, it needs to be compiled.

➡️ If you are using [VSCode](https://code.visualstudio.com/), you can simply use [Live SASS Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass).

Once the extension is installed, you can create any .scss/.sass file and click on the Watch SASS button.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4j5zlwki5hnw9pog0ice.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/agiznl8xk1svdnx15obj.png)

You are already good to go! It will automatically compile your changes every time you save.

➡️ Another option is to install SASS compiler globally on your machine.

```npm install -g sass```

Then, compile your SCSS files from CLI like this:

```sass --watch index.scss index.css```

Head over to the official [documentation](https://sass-lang.com/) for more information. 

➡️ Finally, if you are building web apps using React or any other JavaScript frameworks, it will most likely be working out of the box.

I personally work with React and any app made with create-react-app template supports SCSS by default. Under the hood, [webpack](https://webpack.js.org/) uses sass-loader to compile your SCSS code.

##Features

➡️ **Variables** are supported by CSS as well but SCSS provides a nice and easy to use syntax for declaring and using variables.

```scss
$robotoFont: 'Roboto', sans-serif;
$color: (
  primary: #fff,
  secondary: #000,
);

body {
  font-family: $robotoFont;
  background-color: map-get($color, secondary);
}

```

I think it is not necessary to point to your attention how useful it is to work with variables. Re-use your code, store and update data shared across your app more easily.

➡️ **Nesting** introduces a new way to select your HTML elements. You can aim for a specific element from its parent.

```scss
body {
  margin: 0;

  header {
    background-color: red;

    button {
      width: 200px;
      height: 200px;

      &:hover {
        background-color: blue;
      }
    }
  }
}
```

This is also the way you use pseudo-classes.

➡️ **At-rules** add new functionalities. I won't go through all of them but let me show you this one.

```scss
/* second.scss */
$color: red;

@forward 'second.scss';

/* index.scss */
@use 'second.scss';

body {
  background-color: $color;
}

```
Export your variables and mixins (this is the next feature I will introduce) from a SCSS file with @forward and import it with @use.

➡️ **Mixins** allow you to define styles that can be re-used across your stylesheet. Thanks to mixins you can avoid classes like "float-left" or "flex-center".

```scss
@mixin centerFlex {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin formButton($color) {
  border-radius: 10px;
  background-color: rgba($color: #000000, $alpha: 0);
  color: $color;
  border: solid 3px $color;

  &:hover {
    background-color: $color;
    color: #fff;
    cursor: pointer;
  }
}

form {
  @include centerFlex;

  button {
    @include formButton(blue);
  }
}
```

Write @mixin to declare a new style and import it in your elements with @include. Pass in parameters in your mixin's declaration for even more flexibility 🤸. 

➡️ **Functions, conditions and loops** are another powerful feature available. If you are familiar with programming languages in general you should feel comfortable with this one.

```scss
@function getHeight($width, $ratio) {
  @return $width / $ratio;
}

div {
  width: 200px;
  height: getHeight(200px, 4);
}
```

Declare your functions with @function and simply call them with their name and parentheses (and optional arguments).

```scss
@mixin drawCircleOnly($width, $height) {
  width: $width;
  height: $height;
  @if $width = $height {
    border-radius: 50%;
  } @else {
    display: none;
  }
}

div {
  background-color: black;
  @include drawCircleOnly(100px, 100px);
}

```

Conditionally execute code thanks to @if and @else. The code will only be executed if the expression returns true.

```scss
@for $i from 1 through 5 {
  .section-#{$i} {
    background-color: black;
    width: 10px * $i;
  }
}
```

Avoid writing similar code multiple times yourself thanks to loops. Initialize your counter, write your code once and you are good to go!

➡️ **Bonus!** When converting your SCSS code, the compiler will automatically add --webkits to provide a wider browser support, you don't have to think about it, How cool is that?

```scss
/* index.scss */
div {
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotate(180deg);
}

/* index.css */
div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
```

##Conclusion

SCSS is a great addition to your Front-End developer toolkit. It has useful features and it is easy to get started with. More and more companies work with CSS preprocessors nowadays for a good reason.

I hope you enjoyed reading, see you soon!