What is SASS?

• Sass stands for Syntactically Awesome Stylesheet
• Sass is an extension to CSS
• Sass is a CSS pre-processor
• Sass is completely compatible with all versions of CSS
• Sass reduces repetition of CSS and therefore saves time
• Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006
• Sass is free to download and use

Why use SASS?

Stylesheets are getting larger, more complex, and harder to maintain. This is where a CSS pre-processor can help. Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and other stuff.

Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website.

SASS Installation

npm install -g sass

Once Sass is installed, you can compile your Sass to CSS using the sass command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running sass input.scss output.css from your terminal would take a single Sass file, input.scss, and compile that file to output.css.

You can also watch individual files or directories with the --watch flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your input.scss file, you’d just add the watch flag to your command, like so:

sass --watch input.scss output.css

You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example:

sass --watch app/sass:public/stylesheets

Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder.

Variables

Variables are used to store information that you can re-use in many places. An advantage of using variables is that you can change them in one place instead of many places. Sass uses the $ symbol to make a variable.

Things that can be stored in variables are:

• strings
• numbers
• colors
• booleans
• lists
• nulls

$myFont: Helvetica, sans-serif;
$myColor: gray;
$myFontSize: 18px;
$myWidth: 680px;


#variable {
    font-family: $myFont;
    font-size: $myFontSize;
    color: $myColor;
}

The default behavior for variable scope can be overridden by using the !global switch. !global indicates that a variable is global, which means that it is accessible on all levels.

$myFont: Helvetica, sans-serif;
$myColor: gray;
$myFontSize: 18px;
$myWidth: 680px;


#variable {
    font-family: $myFont;
    font-size: $myFontSize;
    color: $myColor;

    $myColor: red !global;
}

#nesting{
    text-align: center;
    color: $myColor;
    img{
        width: 50%;
    }

    div{
        padding-top: 10px;
        padding-bottom: 20px;
    }
}

Nesting

Sass lets you nest CSS selectors in the same way as HTML.

$myColor: gray;

#nesting{
    text-align: center;
    color: $myColor;
    img{
        width: 50%;
    }

    div{
        padding-top: 10px;
        padding-bottom: 20px;
    }
}

@use

You don’t have to write all your Sass in a single file. You can split it up however you want with the @use rule. This rule loads another Sass file as a module, which means you can refer to its variables, mixins, and functions in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output!

@use "profile";

$myFont: Helvetica, sans-serif;
$myColor: gray;
$myFontSize: 18px;
$myWidth: 680px;


#variable {
    font-family: $myFont;
    font-size: $myFontSize;
    color: $myColor;

    $myColor: red !global;
}

// _profile.scss
#profile{
    font-weight: bold;

    .address{
        text-decoration: wavy;
    }
}

@mixin

 A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. The @include directive is created to let you use (include) the mixin.

style.scss

@mixin important-text {
    color: red;
    font-size: 25px;
    font-weight: bold;
    border: 1px solid blue;
}

#nesting{
    @include important-text;
    text-align: center;
    color: $myColor;
    img{
        width: 50%;
    }

    div{
        padding-top: 10px;
        padding-bottom: 20px;
    }
}

style.css

#nesting {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
  text-align: center;
  color: red;
}

@extend

The @extend directive lets you share a set of CSS properties from one selector to another. The @extend directive is useful if you have almost identically styled elements that only differ in some small details.

style.scss

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

.error {
  @extend %message-shared;
  border-color: red;
}

style.css

.message, .success, .error {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}