The Power of Preprocessors (Sass)

CSS preprocessors are really strong tools to make cleaner and maintainable code. Dealing with thousands of lines of CSS, make you waste a lot of time, redundant code and difficulties in structuring the code.
Preprocessors help us to deal with these things and it has some advantages over CSS.

What is a CSS Preprocessor?
A scripting language that extends CSS and gets compiled into regular CSS syntax.

Why use one?

  • Cleaner code with reusable pieces
  • More flexibility to do things on the fly
  • Shareable snippets and libraries
  • Easily produce CSS that works across browsers
    • There is more than one preprocessor like Sass, Less and Stylus. Here I’m going to explaining the benefits of Sass

      What is Sass?

      Sass is one of the most used CSS preprocessors. It has various features to help you to write better and cleaner CSS code. You can check for details in Sass website

      Installing Sass

      Sass is created in Ruby, so we must first have it installed in our operating system.

      Mac OS X

      For Mac, it is very simple because it already comes with the Ruby interpreter installed. We just have to open a terminal window (
      Install the stable ruby ​​gem:
      # Command line
      $ sudo gem install compass


      We must first install Ruby. You can find it here
      You can check your version or ruby writing:
      # Command line
      $ ruby -v
      Afterward, you open a Windows command mode window in administrator mode to install the gem.
      # Command Line
      $ gem install sass
      If you want to check the version:
      # Command Line
      $ sass -v

      Compile our files in CSS format

      Our .scss and .sass file cannot be interpreted directly by the browser, so it has to be converted to the CSS extension. We can use different forms:
      We have different programs and extensions that we can install in our OS:

      Windows & Mac:

      LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.
      Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

      Visual Studio extension:

      Also, we can use the command line with a syntax like this:
      # Command Line
      $ sass --watch filename.scss:filename.css


      You can declare variables to use them next in your sass file like this:
      @import and modularize
      Sass has a very useful directive that allows other files to be incorporated in the style sheet, as could be done by creating and importing a file in which all the variables are defined (for example, all the color values ​​that are needed). The information of the imported file is used as if it were part of the source code. This maintains clarity in style sheets. With @import any number of files can be imported, even from subdirectories.
      You can import several files and use the variables of the modules in one step:
      Mixins are Sass functions that group CSS declarations together. We can reuse them later like variables.
      After creating the mixin, we can use it in any class with @ include command.
      Sass allows the CSS rules to be nested so that style sheets are more concise and easier to write. All selectors of higher levels are automatically prefixed to nested selectors. Example:
      The previous Sass code is automatically converted into the following CSS code:
      These are some of the most important features of Sass, which help us to write more clean and readable CSS code. I hope this article has given you an understanding of SCSS/SASS. If you have any questions, post them in the comments.



    July 25th, 2019

    I believe it’s transpiling, not compiling. Similar but compiling would compile it down to a lower level language.

    July 25th, 2019

    I think you are right, i didn’t think of that, thank you to the correction!

    Topics of interest