SCSS Introduction 🎨

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 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, you can simply use Live SASS Compiler.

Once the extension is installed, you can create any .scss/.sass file and click on the Watch SASS button.

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 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 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.

$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.

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.

/* 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".

@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.

@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).

@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.

@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?

/* 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!