yinonc/sass.md

## sass.md

      
    Raw
  

              sass.md
            
          
    SASS


Introduction
Installation
variables
Nesting
Partials
Mixins
Extend
Referencing
Math Operators

Introduction

Extension for CSS.
Installation

First, install sass in your repo:
npm i --save-dev sass

Compile your scss files with:
sass src/main.scss dist/style.css

Optional: Use sass-lint in your project:
npm i --save-dev sass-lint

Run sass-lint with:
sass-lint 'src/**/*.scss' -v -q

You can use either the default config, or .sasslintrc file with your rules specifications. More details in sass-lint repo.
Variables

The first feature of SASS is using variables, declared by $:
$offwhite: #EEE8D6;
$darkblue: #022933;
$font-main: helvetiva, 'bree Serif', sans-serif;
body {
  color: $darkblue;
  background-color: $offwhite;
  font-family: $font-main;
}
Variables also can be set to other variables value:
$offwhite: #EEE8D6;
$main-color: $offwhite;
Nesting

Nesting helps us to apply rules for specific id or classname.
.media {
  margin: 0;
  padding: 0;
  .item {
    margin-bottom: 20px;
  }

  p {
    font-size: 16px;
  }
}
Only .item classes and <p> elements under .media classname would accept the rules above.
Variables also can be set to other variables value:
$offwhite: #EEE8D6;
$main-color: $offwhite;
Partials

SASS allows you to break your css into modules called partials.

Usually your main.scss file would import all of the modules.

You simply add import command for another module:
// video.scss
.video {
  margin: 0;
  max-width: 500px;
}
// media.sass
@import "./video";
.media {
  margin: 0;
}

Most processors allows to import module without .scss suffix.

You can also import module from the web:
// media.sass
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab|Merriweather);
.media {
  margin: 0;
}
Mixins

SASS allows you to add JavaScript-like functions for rules called mixins.
The mixin can accept arguments and also set a default value, if not passed:
// mixins.scss
@mixin backImage($image, $height: 200px) {
  background: url($image);
  background-repeat: no-repeat;
  background-position: center center;
  height: $height;
}
// media.sass
@import "./video";
.media {
  @include backImage('http://images.google.com/1.jpg', 600px);
  margin: 0;
}
Extend

SASS allows you to add extend rules for a class.

Basically it will take all the rules from the extended class and apply them into the other class:
// index.<!DOCTYPE html>
<button class=btn-first>First</button>
<button class=btn-second>Second</button>
<button class=btn-third>Third</button>
// index.sass
.btn {
  display: inline-block;
  padding: 6px 12px;
  text-align: center;
}
.btn-first {
  @extend .btn;
  background: red;
}
.btn-second {
  @extend .btn;
  background: blue;
}
.btn-third {
  @extend .btn;
  background: yellow;
}
Referencing

SASS allows you to reference parent selector with &:
// index.sass
.btn {
  display: inline-block;

  &:hover {
    background: yellow;
  }

  // css has last-of-type keyword to apply rule for last selector in the html.
  &:last-of-type {
    margin-bottom: 10px;
  }

  // you can use the & as a nested selector, so this'll apply rules to:
  // .btn #my-id .btn
  #my-id & {
    color: $subColor;
  }
}
Math Operators

SASS allows you to use math operators for calculations:
// index.sass
.btn {
  width: ((100% - (($qty - 1) * $margin)) / $qty);
}