Short SASS tutorial

• nested : Nested style is the default Sass style, because it reflects the structure of the CSS styles and the HTML document they’re styling. Each property has its own line, but the indentation isn’t constant. Each rule is indented based on how deeply it’s nested. For example:
• expanded: Expanded is a more typical human-made CSS style, with each property and rule taking up one line. Properties are indented within the rules, but the rules aren’t indented in any special way.
  
• compact: Compact style takes up less space than Nested or Expanded. It also draws the focus more to the selectors than to their properties. Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no newline, while separate groups of rules have newlines between them.
  
• compressed: Compressed style takes up the minimum amount of space possible, having no whitespace except that necessary to separate selectors and a newline at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors. It’s not meant to be human-readable.

In production, we usually use the last one : compressed.

3. Syntax

You can run all examples below in the online converter provided by SASS official website.

3.1 Variables

SASS allows use of variables, all variables start with $ which is similar to PHP.

        $blue : #1875e7;　
　　div {
　　　color : $blue;
　　}

If you want to embed the variable in a string, you need to put the variable into #{}.

        $side : left;
　　.rounded {
　　　　border-#{$side}-radius: 5px;
　　}

3.2 Calculation

SASS allows expressions in code.

        body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

3.3 Nesting

SASS allows selector nesting. See below codes.

        div h1 {
　　　　color : red;
　　}

You can write it as

       div {
　　　　hi {
　　　　　　color:red;
　　　　}
　　}

in SASS.

Properties can also be nested.

        p {
　　　　border-color: red;
　　}

You can write it as

        p {
　　　　border: {
　　　　　　color: red;
　　　　}
　　}

Note : don't forget the colon after border.

3.4 Comment

SASS has two kinds of comment style.

The standard CSS comment : /* comment */, it will be left in the converted file

Single line comment: //comment, it will be left in only the SASS source file, not in the converted fil.

4. Reuse of codes

4.1 Inheritance

SASS allows a selector to extend another selector. For example, if having class1

        .class1 {
　　　　border: 1px solid #ddd;
　　}

If class2 wants to extend class1, use @extend command

       .class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

4.2 Mixin

Mixin similar to macro in C, it is the code block which can be reused. Use @mixin to define a code block.

       @mixin left {
　　　　float: left;
　　　　margin-left: 10px;
　　}

Use @include command to use the mixin.

        div {
　　　　@include left;
　　}

The power of mixin is that it can have parameters and default values.

       @mixin left($value: 10px) {
　　　　float: left;
　　　　margin-right: $value;
　　}

You can add parameters as you need when you use it

        div {
　　　　@include left(20px);
　　}

4.3 Color functions

SASS provides some built in color functions to generate color code.

        lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

4.4 Import external file

@import command can be used to import external file

       @import("path/filename.scss");

if the file you want to import is .css file, it eqquals to the import command in CSS.

@import "foo.css";

5. Advanced

5.1 Conditional statements

@if

        p {
　　　　@if 1 + 1 == 2 { border: 1px solid; }
　　　　@if 5 < 3 { border: 2px dotted; }
　　}

And @else

        @if lightness($color) > 30% {
　　　　background-color: #000;
　　} @else {
　　　　background-color: #fff;
　　}

5.2 Loop

SASS supports for loop

       @for $i from 1 to 10 {
　　　　.border-#{$i} {
　　　　　　border: #{$i}px solid blue;
　　　　}
　　}

and while loop

        $i: 6;
　　@while $i > 0 {
　　　　.item-#{$i} { width: 2em * $i; }
　　　　$i: $i - 2;
　　}

and @each which is similar to for

       @each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

5.3 Self defined function

SASS allows you to write your own functions

       @function double($n) {
　　　　@return $n * 2;
　　}
　　#sidebar {
　　　　width: double(5px);
　　}

If you want to find the complete tutorial on SASS tutorial page. 

Original author : 阮一峰 Source : http://www.ruanyifeng.com/blog/2012/06/sass.html