This week we'll put away Javascript to look at SASS, which is a CSS thing. 

What is it?

SASS is an extension to CSS, introducing some key components that are missing from CSS, namely variables, nesting, inheritance, operators, and modularity.

How to use it?

1. Install it globally on your computer with npm.
   

   npm install -g sass​

2. When working with SASS, we'll be coding in files with .sass extensions. These files then will be compiled to CSS. You can compile it manually by running this sass command:
   

   sass src/css dist/css​

   Or, automatically using this command:
   

   sass --watch src/css:dist/css​

3. That's it! Now let's try all the features that SASS offer.

Variables

Like any programming language, you can use variables to hold values, such as colors, font-stack, and numbers. Follow the example here:

// declare variables
$my-font: Helvetica, sans-serif
$primary-color: purple
$square-size: 20px

// use them
body
    font: 100% $my-font

.square
    width: $square-size
    height: $square-size
    background: $primary-color

Inheritance

Now, let's say that we want to make red diamonds. We could do that by making the square class a placeholder class and then extend it.

// make square a placeholder by using '%'
%square-property
    width: $square-size
    height: $square-size
    background: $primary-color

// extend square class by using '@extend'
// this will be the default square
.square
    @extend %square-property

// this will be the extended square
.diamond
    @extend %square-property
    background: red
    -webkit-transform: rotate(45deg)
    -ms-transform: rotate(45deg)
    transform: rotate(45deg)

Mixins

Now, diamond class is filled with vendor prefixes that could be grouped together by using mixins. Mixins are arguably similar to functions. You can pass arguments to them.

// create mixin for rotating by using '='
// variables are concatted with '#{variable-name}'
=my-rotate($deg)
    -webkit-transform: rotate(#{$deg}deg)
    -ms-transform: rotate(#{$deg}deg)
    transform: rotate(#{$deg}deg)

// use the mixin by using '+'
.diamond
    @extend %square
    background: red
    +my-rotate(45)

Nesting

Let's say that you want to insert some text into the square and style them. You can nest the style for the text like this.

.square
    width: $square-size
    height: $square-size
    background: $primary-color

    // nest style for text inside square
    p
        font-size: 20px
        color: yellow

Operators

SASS also enables basic math operations. Now, let's say that you want to rotate the diamond class by 10 degrees. We can do this:

=my-rotate($deg)
    -webkit-transform: rotate(#{$deg}deg)
    -ms-transform: rotate(#{$deg}deg)
    transform: rotate(#{$deg}deg)

// create new mixin that add 10 degree more to my-rotate mixin
=my-rotate-plus-10($deg)
    +my-rotate($deg+10)

// use the new mixin
.diamond
    @extend %square-property
    background: red
    +my-rotate-plus-10(45)

Partial Files and Import

For modularity, SASS enables easy exporting and importing of styles. Let's say that we want to encapsulate the square and diamond classes in a separate SASS file and import it in the main SASS file. We can make the separated SASS file a partial file. A partial file is a special SASS file that always named with a leading underscore. For example, we will name our separated file _shape.sass and import it from main.sass:

_shape.sass

$primary-color: purple
$square-size: 20px

=my-rotate($deg)
    -webkit-transform: rotate(#{$deg}deg)
    -ms-transform: rotate(#{$deg}deg)
    transform: rotate(#{$deg}deg)

=my-rotate-plus-10($deg)
    +my-rotate($deg+10)

%square-property
    width: $square-size
    height: $square-size
    background: $primary-color

.square
    @extend %square-property

    p
        font-size: 20px
        color: yellow

.diamond
    @extend %square-property
    background: red
    +my-rotate-plus-10(45)

main.sass

// import shape styles
@import shape

$my-font: Helvetica, sans-serif

body
    font: 100% $my-font

That's the final look of our SASS files. The files are very tidy and well-encapsulated. Now, what you have to do is compile the CSS file and include it into your page, like this:

<!DOCTYPE html>
<html>
    <head>
        <title>SASS Example</title>

        <!-- include the compiled CSS file -->
        <link rel="stylesheet" type="text/css" media="screen" href="dist/main.css" />

    </head>
    <body>
        HI
        <div class="square"></div>
        <div class="diamond"></div>
    </body>
</html>

You'll get this result:

That's it for now!

P.S.

Since we talked about Grunt last week, we can automate SASS compiling with grunt-contrib-sass.