Introduction to Sass for Beginners

Sass can be considered as CSS with superpowers. It is an extension to CSS that helps a person to write in more flexible styles. The world SASS stands for Syntactically Awesome Style Sheets which was initially designed by Hampton Catlin and developed by Natalie Weizenbaum. Image result for sass There are extended features in Sass in comparison to CSS. It helps to make larger and complicated stylesheets clearer to understand and easier to maintain. The new features include mixins, nesting, variables, inheritance, etc. Apart from this, the code is more organized and allows us to work quickly. Writing a code in Sass is not similar to writing it in CSS. For converting a Sass code into CSS code, you need to use a compiler. And you need to be very careful while coding. There are different compilers and apps that can help you to achieve your goal-
  • Hammer
  • CodeKit
  • Compass
  • Koala
  Before going forward, just make sure that you do not get confused by the two syntaxes of Sass. There are two different ways to write the code, though both of them produce the same result. The intended syntax and SCSS files are traditionally given the extensions .sass and .scss respectively. We will be using .scss syntax in this article-  

#1 Variables

Variables can change a code quickly. The concept is similar to other languages. It stores a certain value inside, acceptable values for variables include numbers, strings, null, lists and maps.   In Sass, it can be declared with ‘$’ symbol followed by the name of the variable. In the following case, ‘blue’ is the variable followed by ‘$’ symbol.
  1. /*
  2. // We define the variables.
  3. */
  4. $blue: #3498db;
  5. $red: #e74c3c;
  6. $background: #34495e;
  7. /*
  8. // We apply the variables.
  9. */
  10. body {
  11.  background-color: $background;
  12. }
  13. h1 {
  14.  color: $blue;
  15. }
  16. p {
  17.  color: $red;
  18. }
It compiles to this:
  1. body {
  2.  background-color: #34495e;
  3. }
  4. h1 {
  5.  color: #3498db;
  6. }
  7. p {
  8.  color: #e74c3c;
  9. }
These are just basic things, there are a lot of things which can be done with Sass.

#2 Nesting

Nesting concept is usually used in structured programming languages. It is related to the control structure enclosing into one another. There are different indentation levels in the code, but it is preferred that more than four levels of nesting should be done. Sass allows us to use CSS rules and keeps you from unnecessary repeating. Let us see the example to understand this feature more-
  1. ul {
  2.  list-style: none;
  3.  li {
  4.    padding: 10px;
  5.    display: inline-block;
  6.    a {
  7.      text-decoration: none;
  8.      font-size: 16px;
  9.      color: #333;
  10.    }
  11.  }
  12. }

#3 Extend/Inheritance

Inheritance, in general, is a very powerful feature in programming languages. This concept lets us share sets of CSS properties with one another. It helps to keep the code DRY. It is used when we need similar-styled elements that need some details. Let us understand this with an example by making two buttons- primary and secondary-  
  1. $blue: #3498db;
  2. $red: #e74c3c;
  3. $white: #fff;
  4. .btn {
  5.  display: inline-block;
  6.  padding: 6px 12px;
  7.  font-size: 14px;
  8.  text-align: center;
  9.  border-radius: 4px;
  10.  color: $white;
  11. }
  12. .btn-primary {
  13.  @extend .btn;
  14.  background-color: $blue;
  15. }
  16. .btn-secondary {
  17.  @extend .btn;
  18.  background-color: $red;
  19. }
It compiles to this:
  1. .btn, .btn-primary, .btn-secondary {
  2.  display: inline-block;
  3.  padding: 6px 12px;
  4.  font-size: 14px;
  5.  text-align: center;
  6.  border-radius: 4px;
  7.  color: #fff;
  8. }
  9. .btn-primary {
  10.  background-color: #3498db;
  11. }
  12. .btn-secondary {
  13.  background-color: #e74c3c;
Here Sass combined the selectors instead of repeating the same code. It saves our time and memory as well.

#4 Mixins

Mixins allow a developer to make groups of CSS declarations that could be reused for our websites. One can pass values as arguments that allow our mixin to be more flexible.   The @mixin directive is used to define mixins and @include directive is used to use them. Let’s build a simple basic mixin border-radius that we can use for buttons.  
  1. /*
  2. // We declare the mixin.
  3. */
  4. @mixin border-radius($radius) {
  5.  -webkit-border-radius: $radius;
  6.     -moz-border-radius: $radius;
  7.      -ms-border-radius: $radius;
  8.          border-radius: $radius;
  9. }
  10. /*
  11. // We apply it on our button.
  12. */
  13. .btn {
  14.  @include border-radius(4px);
  15. }
It is compiled to this:
  1. .btn {
  2.  -webkit-border-radius: 4px;
  3.  -moz-border-radius: 4px;
  4.  -ms-border-radius: 4px;
  5.  border-radius: 4px;
  6. }
This is an efficient way of using mixins if a property requires prefixes to work in all browsers.

Bottomline

So this is all as an introduction to Sass. There is a lot more in Sass. It is a powerful tool that helps us to design incredible things. Being an extended version, it definitely gives us extended functionalities.