Syntactically Awesome Stylesheets 

© Yariv Gilad

What is Sass?

  • Sass is a mature, stable and powerful CSS pre-processor  

  • Pre-processors extends CSS with additional features

  • Sass compiles to a standard compliant CSS,
    as well as optional source maps.

  • It has been around since 2006

  • Sass was originally written in Ruby but the original project
    came to its end-of-life as in March 2019.

  • Wrappers have been written in C, Node.js, Java, .NET, PHP, Python, and others.

© Yariv Gilad

Why use Sass?

CSS stylesheets are becoming larger, more complex and difficult to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, operations and inheritance.

© Yariv Gilad

Extending CSS3

Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, operators, directives and partials. As a superset of CSS3, valid CSS is always valid Sass

© Yariv Gilad

.box {
  color: blue;

  a {    
    color: green;
  }
  

  &:hover, &:focus {
    background-color: #fff;    
  }
}

scss

.box{
  color: blue;
}

.box a {
  color: green;
}


.box:hover,
.box:focus {
  background-color: #fff;
}

css

Nesting

selectors

© Yariv Gilad

Nesting

.box{
  & + & {
    margin-top: 10px;
  }
  
  &.additional-class {
    margin-top: 20px;
  }
  
  @media screen and (min-width: 480px) {
    padding: 30px;
  }
}

scss

.box + .box {
  margin-top: 10px;
}

.box.additional-class {
  margin-top: 20px;
}

@media screen and (min-width: 480px) {
  .box{
    padding: 30px;
  }
}

css

Media Queries

© Yariv Gilad

Nesting

.box{

  margin: {
    top: 5px;
    bottom: 12px;
  };
  
  border: {
    width: 1px;
    style: solid;
    color: green;
  };

}

scss

.box{

  margin-top: 5px;
  margin-bottom: 12px;

  border-width: 1px;
  border-style: solid;
  border-color: green;

}

css

Properties

© Yariv Gilad

Variables

$text-size: 10px;
$line-height: 1.4;
$font: Arial, Helvetica, sans-serif;
$color: #000;

.h1 {
  $text-size: 20px; //local variable
  color: $color;
  font: 400 $text-size/$line-height $font;
}

scss

.h1 {
  color: #000;
  font: 400 14.28571px Arial, Helvetica, sans-serif;
}

css

© Yariv Gilad

Variables

$color-green: green;

.header {
  background: $color-green;
}
.footer {
  background: $color-green;
}

scss

.header {
  background: green;
}
.footer {
  background: green;
}

css

Scope

Variables are only available within the level of nested selectors where they’re defined. If they’re defined outside of any nested selectors, they’re available everywhere.

© Yariv Gilad

Variables

// Quoted strings
$font-family: "Lucida Grande";
// Unquoted strings
$font-family-alt: sans-serif;

// Numbers
$big-number: 1000;
$small-number: 1.2;
$font-number: 24px;

// Colors
$color-blue: blue;
$color-grey: rgba(0,0,0,0.5);
$color-real-great: #04a3f9;

// Booleans
$on-sale: false;

// Lists
$large-margin: 1.5em 1em 0 2em;
$great-fonts: Helvetica, Arial, sans-serif;

// Maps
$default-settings: (key1: value1, key2: value2);

scss

Data Types

Supported data types include: quoted / unquoted strings, numbers, colors, booleans, lists and maps.

© Yariv Gilad

Variables

$text-size: 16px;
$line-height: 1.4;

.box {
  font-size: ($text-size + 6) / 2;
  line-height: ceil(3.4); 
  line-height: floor(3.4); 
  line-height: round(1.67); 
}

scss

.box {
  font-size: 12px;
  line-height: 4;
  line-height: 3;
  line-height: 2;
}

css

Math Operations

© Yariv Gilad

Color  functions


p {
  color: hsl(0, 100%, 50%);
}


h2 {
  color: lighten($color-blue, 20%); 
}


h3 {
  color: darken($color-blue, 60%); 
}

scss

© Yariv Gilad

Import Partials

// app.scss

@import "variables";
@import "mixins";
@import "global";

@import "any_stylesheet";

// variables.scss
$color: #222;

// global.scss
.class {
  color: $color;
}

scss

© Yariv Gilad

Extending

.class_1 {
  color: #000;
}

.class_2 {
  @extend .class_1;
  background: #fff;
}

scss

.class_1, .class_2 {
  color: #000;
}

.class_2 {
  background: #fff;
}

css

© Yariv Gilad

Extending

.class_1 {
  color: #000;

  &:hover {
    color: blue;
  }
}

.class_2 {
  @extend .class_1;
  background: #fff;
}

scss

.class_1, .class_2 {
  color: #000;
}

.class_1:hover, .class_2:hover {
  color: blue;
}

.class_2 {
  background: #fff;
}

css

© Yariv Gilad

@mixins


@mixin very-nice-border($color, $width: 100px) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}


.panel{
    @include very-nice-border(green)
}

scss



.panel{
    border-color: green;
    border-width: 100px;
    border-style: dashed;
}

css

© Yariv Gilad

@mixins

@mixin border {
  border-radius: 4px;
  border: 1px solid #eee;

  & .btn{ 
     border-color: blue;
  }
}

.notice {
  @include border;
}

scss

.notice {
  border-radius: 4px;
  border: 1px solid #eee;
}

.notice .btn{
  border-color: blue;
}

css

© Yariv Gilad

Functions

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

scss

#sidebar {
  width: 240px;
}

css

© Yariv Gilad

Benchmark

Processing time for 200KB file of plain CSS:

  1. Sass:                                  4.9s

  2. Sass (with cache):            2.5s

  3. Stylus:                                1.7s

  4. LESS:                                  0.5s

  5. libsass:                              0.2s

© Yariv Gilad

Ways to use Sass

Apps:

Online:

Build tools:

© Yariv Gilad