Why SCSS or SASS

SCSS and SASS are the preprocessed language to compile the file into CSS and they’re both supported by the file extension .scss.

I was working at my personal website a couple of days ago and I was wondering what to use. Since I was building the website with React.js, I decided to try Material-UI, a styling package of Node, I tried it but it’s like a totally new language to me, it might take a while for me to do whatever I want to deal with my project. After two days of trying I overthrow all the Material-UI code, and take me a while to restructure my React Components.

Then I started my journey on SCSS. I spent some time researching either to use SCSS or SASS, but the main difference is the syntax SCSS maintain the strict structure of CSS, such as curly brackets, semicolon, etc. but SASS is more friendly to users who love the syntax of Python, for SASS user can ignore semicolon by skipping to a new line, and use indentation to replacing the curly brackets to wrap up the code. As styling my website, I’d like to go with SCSS with a more cleaned syntax.

So let’s get into a more specific journey I learned while using SCSS.

SCSS has some functionality that acts like the objected-oriented language.

You can declare a variable with a value by using $variable-name: value .

There are At-Rules, which is the most significant difference why we use SCSS but not CSS. I’m going to go over some useful At-Rules of SCSS.

@mixin with it, you can declare an object-like element, such as:

@mixin ul-style {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
nav{
  ul{
    @include ul-style;
  }
}

it’s like an object with (property: value) pairs, but it’s going to compile the whole CSS property and value by using @include to execute it:

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

or u can use @mixin for a function-like element which it takes arguments:

@mixin ul-style($mar, $pad, $lst: none) {
  margin: $mar;
  padding: $pad;
  list-style-type: $lst;
}
nav{
  ul{
    @include ul-style(0, 0);
  }
}

In CSS it returns the same as above, $lst: none is making it an optional argument with a default value of ‘none’.

Another one is when we using nested syntax & is a useful tool,

div {
  .blue {
    & > div{
      color: blue;
    }
  } 
  & > div{
    color:red;
  }
}

the ampersand refers to all its parents, it would be like this compile into CSS:

div .blue > div {
   color: blue;
}
div > div{
   color: red;
}

If you want to learn more about the ampersand check out this blog (The Sass Ampersand) by Richard Finelli.

Also, you can use @import, @extend , to increase the reusability of the SCSS.

And there are also other At-Rules such @if , @for and @return for the @function .

SCSS definitely caught my eye, and I loved it. If you want to learn more about it, check out their document. The sources will be linked below.

Source:

Documentation

The Sass Ampersand | CSS-Tricks