Working with Scss / Sass

1 Introduction to sass - scss

Sass is CSS pre-processor that allows you to 

a. Use variables
b. Nest CSS - this helps you have neat structure
c. Seperate your CSS to modules (partials)
d. Extend some other pre-defined rules e.g using @extend .btn;
e. Use Operators like addition division, logic etc 
f. Add functionalities that allow you to use functions called Mixins


You can write Sass (indentation matters alot) or Scss (more like CSS except you get additional Sass functionalities)

Inorder to use Sass, you need to have Ruby iinstalled because it is written in Ruby. Then install Sass.
You need to pre-process Sass to Css before you can use it on the browser because browsers only understand CSS.
You might want to use task scheduling tools like Gulp to automate the process.

Folder structure
 -- _base.scss
 |
 |
 -- _variables.scss
 |
 |
 -- style.scss - does @import "variables" and Sass automagically figures it out that its '_variables.scss'

2 Extending a class

%btn {
  color: $red;
  background: $green
}

the % sign will hide the btn itself and just output it wherever it was extended.

.btn-default {
  @extend %btn;
  font-size: 1.2rem;
}
.btn-cool {
  @extend %btn;
  font-size: 1.7rem;
}


// .btn-default will be outputed as
.btn-default, .btn-cool {
  color: $red;
  background: $green
}

.btn-default {
  font-size: 1.2rem;
 }
 
.btn-cool {
  font-size: 1.7rem;
 }

3 Operations

// http://placehold.it/500x500 - for placeholder images

@mixin imagegrid($qty, $margin) {
  width: ((100% - (($qty - 1) * $margin)) / $qty);
}

4 Using Mixins

Setting up mixins
@mixin backImage($image, $height) {
  background: url($image);
  bacground-repeat: no-repeat;
  backround-position center center;
  background-size: cover;
  height: $height;
}

Using mixins


.jumbotron {
  @include backImage('../images/image-jpg', 600px);
}

5 Working with lists

$rounded: 10px 5px 0px 4px;

.item {
  border-radius: nth($rounded, 1); // uses 10px
}

6 Writing comments

/* some comments */ - this might not show up if the SCSS is compressed
/*! some comments */ - this will show up irrespective of how its output file is processed
// some comments - this only show up in the SCSS file

7 Modifying class with pseudoclass

.btn-cool {
  @extend %btn;
  font-size: 1.7rem;
  &:hover {
    opacity: 0.7;
  }
  #header & {
    color: $pink // what this does is that whenever we are in the header session and we see a btn-cool, the color will be pink.
  }
}

8 Conditional Statements

@mixin break($args...) {
  @if length($args) == 1 {
   @media (min-width: nth($args, 1)) {
    @content;
   }
  } @else {
    @media (min-width: nth($args, 1))
      and (max-width: nth($args, 2)) {
        @content;
      }
  }
}

9 Looping through lists with @for

$color-headlines: $blue, $purple, $green, $red;

@for $item from 1 through length($color-headlines) {
  h#{$item} {
    color: nth($color-headlines, $item);
  }
}

91 Using @content for media queries

@mixin break($length( {
  @media (min-width: $length) {
    @content;
  }
}


nav {
  header & {
    background: darken($blue, 15%);
  }
  
  .branding {
    display: none;
    @include break(1000px) {
      display: block;
    }
  }
}

92 Going through a list with @each

$color-btn-names: 'default', 'hot', 'cool';
$color-btn-values: $color-main, $red, $blue;

@each $name in $color-btn-names {
  $i: index($color-btn-names, $name);
  
  .btn-#{$name} {
    @extend %btn;
    background: nth($color-btn-value, $i);
  }
}

93 Working with map data type

$color-btns: (
  default: $color-main,
  hot: $red;
  cool: $blue
)

@each $key, $value in $color-btns {
  .btn-#{$key} {
    @extend %btn;
    background: $value;
  }
}