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 (terminal.app) Install the stable ruby ​​gem: # Command line $ sudo gem install compass Windows We must first install Ruby. You can find it here https://rubyinstaller.org/downloads/ 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: monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. LiveReload Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page. Visual Studio extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass Also, we can use the command line with a syntax like this: # Command Line $ sass --watch filename.scss:filename.css Features Variables 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: Mixin 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 command. @ include Nesting 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: Conclusion 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.

The Power of Preprocessors (Sass)

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

The Noonification: Top 10 CSS Performance Tips (11/14/2022)

100 Stories To Learn About Html5

10 Things You Probably Didn’t Know about Sass

10 Reasons To Use TailwindCSS In Your Next Project

10 Frontend Projects to Take Your Coding Skills to the Next Level

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps