Meet Sass

2014.03.13 @ Baidu

Hi, I'm Sass/sæs/

• Born in Jun 30, 2006(first commit on Github)
• Coined by Hampton Catlin(invented Haml)
• Syntactically Awesome StyleSheets
• An extension of CSS3
• Two kinds of syntaxes: SCSS(Sassy CSS) & Sass

Sass vs. SCSS

// Sass syntax:
#sidebar
  width: 30%
  background-color: #faa

// SCSS syntax:
#sidebar {
  width: 30%;
  background-color: #faa;
}

Choose one

How to install

$ gem install sass
$ sass -v
Sass 3.3.0 (Maptastic Maple)

$ sass input.sass output.css
$ scss input.scss output.css
$ sass-convert style.scss style.sass
$ sass-convert style.sass style.scss

Variables

$width: 5em;

#main {
  width: $width;
}

#main {
  width: 5em;
}

!default

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

#main {
  content: "First content";
  new-content: "First time reference";
}

Interpolation

$name: foo;
$attr: border;

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

p.foo {
  border-color: blue;
}

Nested rules

header {
  .logo {
    color: green;
  }
  nav {
    color: blue;
  }
}

header .logo {
  color: green;
}
header nav {
  color: blue;
}

Parent selector

// SCSS:
.button {
  &.primary { background: orange; }
  &.secondary { background: blue; }
}

// Output:
.button.primary { background: orange; }
.button.secondary { background: blue; }

New feature in 3.3

// SCSS:
.button {
  &-primary { background: orange; }
  &-secondary { background: blue; }
}

// Output:
.button-primary { background: orange; }
.button-secondary { background: blue; }

Nested properties

// SCSS:
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

// Output:
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

Data types

1. Number(e.g. 1, 2.3, 4px)
2. String(e.g. how, 'are', "you")
3. Color(e.g. blue, #fff, rgba(0,0,0,.5))
4. Boolean(true, false)
5. List
6. Map
7. Null

List

Lists are just a series of other values, separated by either spaces or commas. In fact, individual values count as lists, too: they’re just lists with one item.

1px 2px, 5px 6px == (1px 2px) (5px 6px)

nth(10px 20px 30px, 1) => 10px
join(10px 20px, 30px 40px) => 10px 20px 30px 40px
append(10px 20px, 30px) => 10px 20px 30px

Maps

Unlike lists, maps must always be surrounded by parentheses and must always be comma-separated.

$map: (key1: value1, key2: value2, key3: value3);
map-get($map, $key)
map-merge($map1, $map2)
map-remove($map, $key)
map-keys($map)
map-values($map)
map-has-key($map, $key)

Maps example

$themes: (
  mist: (
    header: #DCFAC0,
    text:   #00968B,
    border: #85C79C
  ),
  spring: (
    header: #F4FAC7,
    text:   #C2454E,
    border: #FFB158
  )
);

h1 {
  color: map-get(map-get($themes, spring), header);
}

Operations

• ==, !=
• +, -, *, /, %
• <, >, <=, >=
• ()
• Built-in functions

@-rules

• @import
• @media
• @extend
• @at-root
• @debug
• @warn

@import

All imported SCSS and Sass files will be merged together into a single CSS output file.

Any variables or mixins defined in imported files can be used in the main file.

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

Import partials

If we have _font.scss, _color.scss and _grid.scss

// main.scss:
@import font,
        color,
        grid;

@extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

Extend placeholder

%center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.container {
  @extend %center;
}
.image-cover {
  @extend %center;
}

.container, .image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@include mixin

@mixin center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.container {
  @include center;
}
.image-cover {
  @include center;
}

.container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Mixin or Placeholder

• You cannot use variables in a placeholder
• Sass will duplicate the output of the mixin

Control Directives

• @if and @else
• @for
• @while
• @each

@at-root

.badge {
  @at-root {
    .info { ... }
    .header { ... }
  }
}

.info { ... }
.header { ... }

@at-root

@media print {
  .page {
    width: 8in;
    @at-root (without: media) {
      color: red;
    }
  }
}

@media print {
  .page {
    width: 8in;
  }
}
.page {
  color: red;
}

Function Directives

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

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

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

#sidebar {
  width: 240px; }

Sass source maps

$ scss --sourcemap sass/styles.scss public/styles.css

// style.css:
/*# sourceMappingURL=style.css.map */

Demo

Output style

$ sass --style NAME input.scss output.css

Nested (default)

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

Expanded

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

.huge {
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

Compact

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }

.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

Compressed

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

Comments

Sass
Style Guide

1. List @extend(s) first
2. List regular styles next
3. List @include(s) next
4. Nested selectors last

Resources

• Github repository of Sass
• Sass plugin for Sublime text
• Sass Meister
• The Sass Way
• Sass style guide
• Sass Conference
• Videos of 2013 Sass Conf
• Getting started with CSS sourcemaps and in-browser Sass editing