Tame Your CSS
With Sass

Wifi: csguest / capstratvisitor

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; }

Pro tip: use % to extend a silent class.

Nesting

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

Pro tip: you should nest as little as possible.

Parent Selector

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

Pro tip: the parent selector goes great with Modernizr

Operations


a { color: #F00 - #111; }

Standard arithmetic:  +  -  *  /  %

Color Functions


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

Color functions: lighten, darken, transparentize, mix, desaturate, grayscale, invert and more

Functions

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

a { font-size: em(14px); }
Pro tip: arguments can be made optional
by assigning default values

Mixins

        @mixin my-background($color) {        background: $color           linear-gradient(            to bottom,            lighten($color, 10%),            darken($color, 10%)          );      } 
 a { @include my-background($link-color); }
Pro tip: use mixin libraries like Compass or Bourbon

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');
      }
  }
    
Can also use @while for looping

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; } 
  }

Tame your CSS with Sass

By Les James

Tame your CSS with Sass

  • 1,379