Why to use SASS(SCSS) instead of simple CSS?

Why to use SASS(SCSS) instead of simple CSS?

Nowadays every developer is using some kind of CSS preprocessors like LESS, STYLUS or SASS. A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. However, if you’re new to CSS, I do not recommend using any preprocessors (like SASS). The same goes for any other extensions or frameworks. While it’s true they offer many advantages, it’s more important that you first understand the basics of CSS!

What is SASS?

SASS (Syntactically Awesome Style Sheets) is an extension of CSS that enables you to use things like variables, nested rules, inline imports and more. It also helps to keep things organized and allows you to create style sheets faster. The only requirement for using SASS is that you must have Ruby installed. SASS includes two syntax options:

– SCSS (Sassy CSS): Uses the .scss file extension and is fully compliant with CSS syntax

– Indented (simply called ‘SASS’): Uses .sass file extension and indentation rather than brackets; it is not fully compliant with CSS syntax, but it’s quicker to write.

But what is the difference between SASS and SCSS?

There are two syntaxes available for SASS. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the SASS features described below. Files using this syntax have the .scss extension.

The second and older syntax, known as the indented syntax (or sometimes just “SASS”), provides a more concise way of writing CSS.
It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties.
Files using this syntax have the .sass extension.

The difference is UI. Underneath the textual exterior, they are identical. This is why SASS and SCSS files can import each other. Actually, SASS has four syntax parsers: SCSS, SASS, CSS, and LESS. All of these convert a different syntax into an Abstract Syntax Tree which is further processed into CSS output or even onto one of the other formats via the sass-convert tool. Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.

SASS Indented Syntax

This syntax looks nothing like CSS — its goal is brevity. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Where you’d use a semicolon to separate statements, it uses new lines.

Summary
Why to use SASS(SCSS) instead of simple CSS?
Article Name
Why to use SASS(SCSS) instead of simple CSS?
Description
Nowadays every developer is using some kind of CSS preprocessors like LESS, STYLUS or SASS. A CSS preprocessor is a scripting language that extends CSS by allowing developers to write code in one language and then compile it into CSS. However, if you're new to CSS, I do not recommend using any preprocessors (like SASS). The same goes for any other extensions or frameworks. While it's true they offer many advantages, it's more important that you first understand the basics of CSS!
Author
Publisher Name
Responsive-web.site
Publisher Logo
#main
  color: blue
  font-size: 0.3em

  a
    font-weight: bold
    font-family: serif

    &:hover
      background-color: #eee

SCSS Syntax

.scss is essentially a subset of the CSS3 syntax. This means that every valid CSS3 stylesheet is valid .scss as well. This is my preferred syntax and what I’ll be using to show examples throughout this article.

#main {
  color: blue;
  font-size: 0.3em;

  a {
    font-weight: bold;
    font-family: serif;

    &:hover {
      background-color: #eee;
    }
  }
}

Variables

One of the guiding principles of modern CSS should be the principle of modular code, that is to say, bits of code that you can reuse without having to rely on the structure of your markup.

$site_max_width: 960px;
$font_color: $333;
$link_color: $00c;
$font_family: Arial, sans-serif;
$font_size: 16px;
$line_height: percentage(20px / $font_size);

body {
  color: $font_color;
  font-size: $font_size;
  font-family: $font_family;
  line-height: $line_height;
}

#main {
  width: 100%;
  max-width: $site_max_width;
}

Mixins

Mixins are one of the most powerful parts of Sass and really allow you to get creative. A mixin is a collection of re-usable styles, properties and selectors. You could think of a mixin as a macro or snippet for regular re-use. Creating a Mixin is very simple, all we have to do is use @mixin command followed by a space and our Mixin name, then we open and close our curly brackets. Something like this.

@mixin flex {
    display: -webkit-flex;
    display: flex;
}

Now that we know how to declare Mixins, we can now learn how to use them in our SCSS code. To use a Mixin, we simply use @include followed by the name of the Mixin and a semi-colon.

.row {
    @include flex;
}

After compiling this SCSS code into CSS, our CSS file should look like this.

.row {
    display: -webkit-flex;
    display: flex;
}

Mixins can also take in arguments to make the output more dynamic. For example, let’s assume we are building a grid system, and we can choose the whether to use flexbox for our layout or floats. We can create a Mixin, pass an argument to tell it to alternate between flex or floats. To pass arguments to a Mixin, we simply do this.

@mixin grid($flex) {
    @if $flex {
        @include flex;
    } @else {
        display: block;
    }
}

Now, when we call the grid Mixin, we must pass a truthy argument to the Mixin. Just as you’d expect, pass an argument to an invoked Mixin like this.

@include grid(true);

@content

@content allows for Mixin extension. We can pass a block to Mixins with the use of @content. For example: Instead of having to type the media query everytime, this feels like a much more stable way to handle media queries.

$sm: 992px;

@mixin MQ($canvas) {
	@if $canvas == SM {
        @media only screen and (min-width:  $sm){
            @content; 
        }
    }
}

After this you can use this mixin like this in your code.

#main {
 @include MQ(SM) {
    display: none;
  }
}

After compiling this SCSS code into CSS, our CSS file should look like this.

@media only screen and (min-width: 992px) {
 #main {
  display: none;
 }
}

Conclusion

SCSS and SASS are very useful and can speed up your workflow, and there is a lot we can do with them. So if your thinking to use CSS preprocessors for sure you won’t regret it. Once again, it’s important that you first understand the basics of CSS!

Note: Before you can start working with SASS or SCSS you need to install Ruby, Compass and SASS. You can find a post regarding this process here.

Dont' forget to like or share this post if you found it useful. Thank you!