Introduction to Sass

Syntactically Awesome Stylesheets

#Sass, #WxT

August 14, 2014

Flavours

1. Indentation based (.sass)
2. Nested braces (.scss)

Code Examples

//COBUCLG  JOB CLASS=A,MSGCLASS=A,MSGLEVEL=(1,1)
//HELOWRLD EXEC COBUCLG,PARM.COB='MAP,LIST,LET'
//COB.SYSIN DD *
  001  IDENTIFICATION DIVISION.
  002  PROGRAM-ID.  'HELLO'.
  003  ENVIRONMENT DIVISION.
  004  CONFIGURATION SECTION.
  005  SOURCE-COMPUTER.  IBM-360.
  006  OBJECT-COMPUTER.  IBM-360.
  0065 SPECIAL-NAMES.
  0066     CONSOLE IS CNSL.
  007  DATA DIVISION.
  008  WORKING-STORAGE SECTION.
  009  77  HELLO-CONST   PIC X(12) VALUE 'HELLO, WORLD'.
  075  PROCEDURE DIVISION.
  090  000-DISPLAY.
  100      DISPLAY HELLO-CONST UPON CNSL.
  110      STOP RUN.
//LKED.SYSLIB DD DSNAME=SYS1.COBLIB,DISP=SHR
//            DD DSNAME=SYS1.LINKLIB,DISP=SHR
//GO.SYSPRINT DD SYSOUT=A
//

Real Code Examples

// Variables
$dont-even: blink;

.awesome {
    text-decoration: $dont-even;
    
    $me-pink: #d69;
    color: $me-pink;
}

.sass {
    .is {
        .so {
            // Inheritance over duplication
            @extend .awesome;
        }
    }
}

.and .valid .css {
	// is also valid SCSS
}
		

1. Open on Sassmeister
2. Open on CodePen

How do I compile this stuff?

1. Sass - The original Ruby Gem. http://github.com/sass/sass
2. Compass - The Compass Gem: http://compass-style.org/
3. LibSass - A C library http://github.com/sass/libsass
4. Node-Sass: A NodeJS native bindinf for libSass http://github.com/sass/node-sass

Warning

Not all compilers support the features of the Ruby version :(

$Variables

1. Start with a $
2. Makes it easier for theming and branding

Scope

Variables are scoped to the block that calls them

What should this be compiled to?

$color: white;

@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}

.colors {
  @include colors {
    color: $color;
  }
}
		

Did you get it right?

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}
		

Naming

Make it easy to figure out which variable a new user should pick

See http://thesassway.com/beginner/variable-naming for a good explaination

Interpolation

Lets mix up some strings!

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

Where would this be usefull?

_Partials

Partials let you build a sheet that doesn't compile to a CSS file

Why would you use partials

• Global variables
• Functions and Mixins utility sheets
• @media query specific sheets

How to make a partial

1. Rename your file to add "_" at the front
2. Profit$$$

@imports

OK, so I have 20 sheets, how do I stitch them together

When to import?

• Your common variables
• Mixins
• Your media queries

Demo

_branding.scss

$border-colour: red;
$border-width: 1px;
		

base.scss

@import "branding";

.uses-partial {
	color: $border-colour;
}
		

But I really like the CSS version of @import

• OK ...
• Are you sure?

Keeping your classic @import

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
		

OK, a valid use case for the old way

$theme: unquote("awesome");

@import url("http://cdn.example.com/css/#{$theme}.css");
		

@extend yourself

Used when you want extend

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

.success {
  @extend .message;
  border-color: green;
}

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

.warning {
  @extend .message;
  border-color: yellow;
}
		

%placholder

Used when you want extend, but safer

// If nothing extends me, I don't output anything

%width-small {
    width: 10px;
}
    

Demo

Used when you want extend, but safer

// If nothing extends me, I don't output anything

%width-small {
  width: 10px;
}

.foo {
  // I want to grow up to be small
  @extend %width-small;
}

// OK, now what is output
.bar {
  @extend %width-small;
  background: #ccc;
}
    

@mixins

Hey, we're all related right

@mixin the-border {
  border: 1px solid #ccc;
}

@mixin good-border {
  @content;
  border-color: green;
}

// What happens when I don't pass a value
@mixin reading-direction($direction: "rtl") {
  direction: $direction;
}
		

@functions

Calculate all the thinks

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

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

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

SCSS Lint

https://github.com/causes/scss-lint

This allows you to create coding guidelines for your team, and warns you when you might be making mistakes