Tame Your CSS
With Sass

Vanilla CSS is painful

Why Sass?

How to Compile?

the most important Sass feature
you'll ever learn

 @import 'my-file';

Comments

 // Silent comments rule!

Variables

$link-color: #090;

 a { color: $link-color; }

extending

 .widget { color: pink; }

 .component { @extend .widget; }

Nesting

    .heading {      color: gray;      .title { color: red; }  }

Parent Selector

    a {    color: pink;    &:hover { color: hotpink; }  }

Operations

a { color: #F00 - #111; }

Color Functions

  a {
    color: red;    &:hover {      color: darken(red, 10%);    }  }

Functions

  @function em($px, $base: 16px) {   @return ($px / $base) * 1em; }

a { font-size: em(14px); }

Mixins

        @mixin my-background($color) {        background: $color           linear-gradient(            to bottom,            lighten($color, 10%),            darken($color, 10%)          );      } 

 a { @include my-background($link-color); }

Keyword Arguments

    @mixin shadow($x: 1px, $y: 1px, $size: 1px) {
        box-shadow: $x $y $size black;
    }

// ordered arguments //
@include shadow(2px, 3px, 4px);

// keyword arguments //@include shadow($size: 5px);

Interpolation

$prefix = foo;

.#{$prefix}-widget { color: blue; }

Loops

  @for $i from 1 through 8 {
     .column-#{$i} { width: 80px * $i; }
  }

  $social-icons: twitter, facebook, linkedin
    
  @each $icon in $social-icons {
      .#{$icon}-icon {
          background-image: url('/images/#{$icon}.png');
      }
  }
    

if/else

  @mixin text-background($color) {      color: $color;      @if lightness($color) > 50% {          background: black;      } @else {          background: white;      }  }

Content Blocks

    @mixin mq($size) {
    @media (min-width: $size) {
       @content;
    }
  }

    @include mq(600px) {
    p { background: green; } 
  }