Getting Started With SASS

In this blog post, we will learn about basics of SASS. SASS stands for Syntactically Awesome Stylesheet is a CSS pre-processor which help to reduce repetition CSS code and help us write more flexible styles.It help us make larger and complicated stylesheets clearer to understand and maintain easily.

1. Introduction

It was initially designed by Hampton Catlin and developed Natalie Weizenbaum in in 2006. Later Weizenbaum and Chris Eppstein used its initial version to extend the SASS with SassScript. Thanks to features like variablesmixinsnestinginheritance the code is more organized, allowing us to work quicker.

SASS supports two types of syntaxes. They are

  • SASS also called as indented syntax with .sass extension.
  • SCSS , a CSS like syntax with .scss.

They both do the same things, just are written in different ways. SCSS is the newer one and is generally considered better, so we are going to go with that. In this post, we implement all examples with SCSS syntax.

2. Installation

SASS files cannot be interpreted by the browser, so they need compiling to standard CSS before they are ready to hit the web. That’s why you need some sort of tool to help you translate .scss / sass files into .css. Here you have a couple of options:

  • The simplest solution is a browser tool for writing and compiling Sass right on the spot – SassMeister.
  • Use a 3rd party desktop app. Both free and paid versions are available. They are
  • If you are a CLI person like we are, you can install Sass on your computer and compile files manually.
  • Build System like gulp can written code for translate .scss files into file.

3. Variables

SASS allows variables to defined just like similar fashion of all other programming languages. All SASS variables are begin with $ and supports four data types like Numbers, Strings, Colors and Boolean.

To declare a variable in sass you do $ followed by the name of the variable, in this case blue, a colon and then the value of that variable.

In SCSS Style

which complies to

4. Mixins

Mixins is another feature of SASS which helps us to write reusable styles. Basically, a mixin are CSS functions that you can include whereever you want. We can pass values as arguments, this allows our mixin to be more flexible.

Sass uses the @mixin directive to define mixins, and the @include directive to use them. Let’s build a simple basic mixin border-radius  that we can use for buttons.

In SCSS Style

which complies to

5. Nesting

Nesting is feature of SASS help us to write cleaner code and maintain easily.  In Sass, nesting CSS rules allows to define hierarchy selectors.  With Sass nesting you can organize your stylesheet in a way that resembles the HTML more closely, thus reducing the chance of CSS conflicts.

In SCSS Style

which complies to

6.Extend/Inheritance

Inheritance is one of the most useful features within sass and using extend let’s us share sets of CSS properties from one to another. This helps keep our sass very DRY.

Extending should be used when we need similarly styled elements, which still differ in some detail. For example, let’s make two buttons – a primary one and a secondary one.

In SCSS Style

which complies to

7. Conclusion

This basic introduction or getting started with SASS. Sass is an extremely powerful tool that helps us do some really incredible things. Latest version of bootstrap 4-beta is also updated their framework from LESS to SASS. We’ll cover more cool and advanced stuff in the next tutorial.

If you want to get more familiar with everything it has to offer, follow these links:

Sass documentation

Full list of Sass functions

The Sass Way tutorials

CSS pre-processors comparison chart

 

 

 

 

No Comments

Post A Comment