CSS to SASS

Why is SASS better?

Sass is basically CSS but with the ability to use variables

Declaring Variables

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

A typical CSS rules

CSS

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

Nesting

Sass allows nesting of CSS rules

Nesting of CSS rules

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

Mixin

We can group CSS declarations into a Mixin and reuse it.

Vendor prefixes in CSS:

div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

Instead of repeating this for all elements with a box-shadow, we can define a Mixin. Mixins are like functions for CSS.

Declaring a box-shadow mixin:

@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;
}

A mixin is called with the **@include **directive:

Using the box-shadow mixin

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

Use @if and @else to Add Logic To Your Styles

The @if directive in Sass is useful to test for a specific case - it works just like the if statement in JavaScript.

Using Logic in SASS

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

Example usage with html:

Using SASS in HTML

<style type="text/scss">
  @mixin border-stroke($val) {
    @if $val == light {
      border: 1px solid black;
    } @else if $val == medium {
      border: 3px solid black;
    } @else if $val == heavy {
      border: 6px solid black;
    } @else {
      border: none;
    }
  }
 
  #box {
    width: 150px;
    height: 150px;
    background-color: red;
    @include border-stroke(medium);
  }
</style>
 
<div id="box"></div>

Use @for to Create a Sass Loop

The @for directive adds styles in a loop, very similar to a for loop in JavaScript.

start through end: includes the end number as part of the count
start to end: excludes the end number as part of the count

Creating a Grid Layout:

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

The above translate the following in CSS:

Grid in CSS

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

Example, to create 5 fonts with increasing size:

Increasing font size

<style type="text/scss">
  @for $i from 1 to 6 {
    .text-#{$i} {
      font-size: 15px * $i;
    }
  }
</style>
 
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Use @each to Map Over Items in a List

Creating class for different text

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

Using for each loop:

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

We can do in this way too

Mapping

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

Three Bg color

<style type="text/scss">
  @each $color in blue, black, red {
    .#{$color}-bg {
      background-color: $color;
    }
  }
  div {
    height: 200px;
    width: 200px;
  }
</style>
 
<div class="blue-bg"></div>
<div class="black-bg"></div>
<div class="red-bg"></div>

Apply a Style Until a Condition is Met with @while

The @while directive is an option with similar functionality to the JavaScript while loop. It creates CSS rules until a condition is met.

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

Increasing fontsize using while loop

<style type="text/scss">
  $x: 1;
  @while $x < 6 {
    .text-#{$x} {
      font-size: 15px * $x;
    }
    $x: $x + 1;
  }
</style>
 
<p class="text-1">Hello</p>
<p class="text-2">Hello</p>
<p class="text-3">Hello</p>
<p class="text-4">Hello</p>
<p class="text-5">Hello</p>

Split Your Styles into Smaller Chunks with Partials

Partials in Sass are separate files that hold segments of CSS code. These are imported and used in other Sass files.

This is a great way to group similar code into a module to keep it organized.

Names for partials start with the underscore (_) character, which tells Sass it is a small segment of CSS and not to convert it into a CSS file.

Also, Sass files end with the .scss file extension.

To bring the code in the partial into another Sass file, use the @import directive.

Import a _variables.scss partials

@import 'variables'

Extend One Set of CSS Styles to Another Element

Sass has a feature called extend that makes it easy to borrow the CSS rules from one element and build upon them in another.

Extending base properties

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

Sample HTML:

<style type='text/scss'>
  h3{
    text-align: center;
  }
  .info{
    width: 200px;
    border: 1px solid black;
    margin: 0 auto;
  }
 
  .info-important{
    @extend .info;
    background-color: magenta;
  }
 
</style>
<h3>Posts</h3>
<div class="info-important">
  <p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
</div>
 
<div class="info">
  <p>This is a simple post. It has basic styling and can be extended for other uses.</p>
</div>