Week 12: SASS

Agenda

• Week 12 Tutorial Files (opens new window)
• CSS Preprocessors
• SASS

SASS

• SASS is a CSS pre-processor, which means that it is processed and generates the CSS before the CSS is sent to the browser.
• As the designer / developer you will write the SASS commands to generate the CSS.
• You will compile the SASS code into CSS.
• The finished CSS is what will be linked to on the webpage, just like always.
• The official website SASS website (opens new window)
• There are other CSS pre-processors that you may encounter
• LESS (opens new window) and Stylus (opens new window) are two popular ones.
• The popularity of LESS has reduced lately. SASS and Stylus are the two most popular.

SASS Installation

To Do: decide on SASS dart vs node.

• It can be installed in several ways.
• We will be using the DART version of SASS.
• About DART SASS (opens new window)
• Install Instructions (opens new window)
• We are using the DART version because it has the least issues with installs and running.
• You can install SASS with Ruby but that requires extra install work for Windows.
• You can install and run SASS with npm but it runs slower than with DART or RUBY.
• On Windows you can use Choclatey package manager to install a stand alone version.
• On OSX or Linux you can use HomeBrew to install a stand alone version.
• You can run SASS in the browser with JavaScript but this is inefficient and forces the user to download more and do the processing.
• We will be running it from the CLI with Dart-Sass
• Go HERE (opens new window) to download the proper version for your Windows x64.
• You will then need to add it to your PATH Environmental variable. Instructions (opens new window)

Running SASS

• For SASS to do the pre-processing we need to set it up.
• We will have one folder where we save our .scss files
• Then we run the command to compile the SASS and tell it where to put the newly generated .css file(s)
• Let's say we have the following project structure
• Now let's say that there is a file inside the sass folder called main.scss
• We want to convert that file from SASS to CSS, so on the CLI, from the root folder of our project, we type:

sass sass/main.scss:css/main.css

• That will run the compiler once to convert the SASS file into a file, inside the css folder, called main.css

• If you wanted to convert ALL the files inside the sass folder into css files of the same name inside the css folder then type:

sass sass/:css/

TIP

Use imports in SASS to combine your SASS files into a single CSS file that can be linked to from your HTML

• If you want to have SASS constantly watch your folder for changes to files as they are saved then you can use the --watch flag.
• To stop SASS watching your files, use CTRL + C to stop it.

sass --watch sass/:css/

• Finally, there are options for the output style of your CSS.
• You can output your CSS in an expanded format that makes it easy for you to read.
• OR
• You can output your CSS in a compressed format that removes all the comments and extra whitespace so you have a small file-size that is better for sending to the browser.
• Enter ONE of the lines below

sass --watch sass/:css/ --style expanded
sass --watch sass/:css/ --style compressed

• For any of these sass commands there will also be a .css.map file that gets created.
• The map file will be used to track changes between versions, determine where different parts of the file came from, and to provide debugging information to your IDE.

SASS Syntax

• Here is the basic Guide to SASS (opens new window)

• Full Reference for SASS (opens new window)

• Good SASS tutorial site (opens new window)

• Multiple SASS tutorials on Hackr.io (opens new window)

• Learning SASS video playlist (opens new window)

• Key SASS concepts:

  • Variables

    $font-stack: Helvetica, sans-serif;
    

  • Mixins

    @mixin transform($property) {
      -webkit-transform: $property;
      -ms-transform: $property;
      transform: $property;
    }
    
    .box {
      @include transform(rotate(30deg));
    }
    

  • Functions

    @function double($size) {
      @return $size * 2;
      //20px  -> 40px   3rem -> 6rem
    }
    h1 {
      font-size: double($lg);
    }
    

  • Nesting

    .row {
      border: 1px solid #999;
      .col {
        background-color: #e4e4e4;
        padding: 1rem;
      }
    }
    

  • Partials and Imports

    /*  /sass/_some.scss */
    
    @import "reset";
    

  • Extends

    %message-shared {
      border: 1px solid #ccc;
      padding: 10px;
    }
    
    .message {
      color: #333;
      @extend %message-shared;
    }
    

  • Interpolation

    p.#{$name} {
      #{$attr}-color: blue;
    }
    

Playground for Testing SASS

• There is a website, like CodePen, that you can use to test your SASS syntax
• SassMeister (opens new window)

To Do Before Week 13

Self-Directed To Do

• Get familiar with the Bootstrap documentation (opens new window)
• Complete Week 12: SASS File Organization
• Review the final assignment