Sass: Syntactically Awesome Style Sheets examples

000_main.md

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Features

• CSS Compatible: Sass is completely compatible with all versions of CSS.
• Mature: Sass has been actively supported for about 12 years by its loving Core Team.
• Frameworks: Popular frameworks built with Sass -> Compass, Bourbon, and Susy.
• Nesting: HTML elements are nested. But CSS elements are not nested by default. Saas provides a way to nesting elements.
• Variables
• Math operators
• Mixin
• Condition
• Loop
• Partial and import
• Extends

Reference:

• Official site
• Saas features
• Saas basics
• Adding Sass Stylesheet to React
• Learn Sass with Freecodecamp

001_variables.md

Variables in Saas

• Saas can use variables to set and store data.
• Variables start with a $ followed by the variable name.
• Use colon instead of equal sign for assignment.
• Example

  $main-fonts: Arial, sans-serif;
  $headings-color: green;
  
  //To use variables:
  h1 {
    font-family: $main-fonts;
    color: $headings-color;
  }

002_nested_elements.md

Nesting Elements

• Saas allows nesting of CSS rules to organize the style sheet.
• CSS rules:

  nav {
    background-color: red;
  }
  
  nav ul {
    list-style: none;
  }
  
  nav ul li {
    display: inline-block;
  }

• Equivalent Saas implementation:

  nav {
    background-color: red;
  
    ul {
      list-style: none;
  
      li {
        display: inline-block;
      }
    }
  }

003_mixins.md

Mixins

• A mixin is a group of CSS rules that can be reused.
• It accepts any number of variables as parameter.
• Mixin starts with a @mixin followed by the mixin name.
• The parameters are given between the parentheses.
• Mixin can be used as a CSS declaration starting with @include followed by the name of the mixin.
• Mixin declaration:

  @mixin box-shadow($x, $y, $blur, $c){ 
    -webkit-box-shadow: $x, $y, $blur, $c;
    -moz-box-shadow: $x, $y, $blur, $c;
    -ms-box-shadow: $x, $y, $blur, $c;
    box-shadow: $x, $y, $blur, $c;
  }

• Use declared mixin:

    div {
      @include box-shadow(0px, 0px, 4px, #fff);
      color: black;
    }

004_conditions.md

Conditions

• We can use if - else if - else condition in Saas using @if directive.
• Example of conditions:

  @mixin text-effect($val) {
    @if $val == danger {
      color: red;
    }
    @else if $val == alert {
      color: yellow;
    }
    @else if $val == success {
      color: green;
    }
    @else {
      color: black;
    }
  }

005_loop.md

For loop

• The @for directive adds styles in a loop.
• @for is used in two ways: "start through end" or "start to end".
• The main difference is that "start to end" excludes the end number, and "start through end" includes the end number.
• Example of start through end:

  @for $i from 1 through 12 {
    .col-#{$i} { width: 100%/12 * $i; }
  }

  • The #{$i} part is the syntax to combine a variable i with text to make a string.
  • After compilation to CSS:

  .col-1 {
    width: 8.33333%;
  }
  
  .col-2 {
    width: 16.66667%;
  }
  
  ...
  
  .col-12 {
    width: 100%;
  }  

For-each loop

• Saas provides @each directive which loops over each item in a list or map.
• Example of @each directive to iterate a list:

  @each $color in blue, red, green {
    .#{$color}-text {color: $color;}
  }

• Example of @each directive to iterate a map:

  $colors: (color1: blue, color2: red, color3: green);
  
  @each $key, $color in $colors {
    .#{$color}-text {color: $color;}
  }

• After compilation to CSS:

  .blue-text {
    color: blue;
  }
  
  .red-text {
    color: red;
  }
  
  .green-text {
    color: green;
  }

While loop

• @while directive allows writing while loop in Sass.
• Example of while loop that creates .col-1 to .col-12 CSS classes:

  $x: 1;
  @while $x < 13 {
    .col-#{$x} { width: 100%/12 * $x;}
    $x: $x + 1;
  }

  • The #{$x} part is the syntax to combine a variable x with text to make a string.

006_partials_and_import.md

Partials

• Partials allow to create separate files that hold segements of CSS code.
• This is an excellent way to group similar code into a module.
• Names for partials start with underscore (_) character.
• Saas compiler does not compile partials into CSS.
• Example of a partial named _reset.scss:

  // _reset.scss
  html,
  body{
    margin:  0;
    padding: 0;
  }

Imports

• @import directive is used to load partial into another Sass file.
• Example of importing a partial named _reset.scss in another file called base.scss:

  // base.scss
  @import 'reset';
  body {
    font: 100% Helvetica, sans-serif;
    background-color: #efefef;
  }

007_extend.md

Extend

• @extend directive lets to extend an existing CSS rule in another.
• Example of extending a CSS selector rule in another selector rule:

  .panel{
    background-color: red;
    height: 70px;
    border: 2px solid green;
  }
  
  .big-panel{
    @extend .panel;
    width: 150px;
    font-size: 2em;
  }

• Example of using placeholder:

  %message-shared {
    border: 1px solid #ccc;
    padding: 10px;
    color: #333;
  }
  .success {
    @extend %message-shared;
    border-color: green;
  }
  .error {
    @extend %message-shared;
    border-color: red;
  }  
  

  • A placeholder class is a special type of class that can help keep compiled CSS neat and clean.
  • Placeholder class starts with the percent character (%).
  • Placeholder classes are not printed in compiles CSS.
  • In the previous example, message-shared placeholder class will not present in the compiles CSS.