Sasstronauts

Follow Along

sasstronauts.com

Sass

Variables

// Let's get dangerous.
$darkwing-duck-purple: #582e76;
$launchpad-red: #7e1a03;

.duck {
    background: $darkwing-duck-purple;
}
.mcquack {
    background: $launchpad-red;
}

Repeatable code

// SCSS (http://gradientsmotherfucker.com/)
@mixin gradients-motherfucker($top, $bottom){
    background-color: $top;
    background-image: linear-gradient(top, $top, $bottom);
}

.foo {
    @include gradients-motherfucker(red, blue);
}
// CSS
.foo {
    background-color: red;
    background-image: linear-gradient(top, red, blue);
}

Chris Holder

@see8ch

Michael Arestad

@michaelarestad

Sass Compiling

Command Line

Grunt

Gruntfile.js

Setting up your files

This folder setup rocks

@import ALL THE THINGS

@import "mixins/mixins";
@import "colors/colors";
@import "normalize";
@import "typography/typography";
@import "icons/icons";
@import "modules/elements/elements";
@import "modules/fallback-message";
@import "modules/hint";
@import "modules/prism";
@import "modules/stars/stars";
@import "main";
@import "_demos";

Looks crazy, but it's...

Back to Sass!

Nesting!

Tired of this?

.class {}
.class:before,
.class:after{}
.class:hover{}
.class:hover:after {}
.class .child-element{}
.foo .class{}
// SCSS
.red {
    color: red;

    &.blue {
        color: purple;
    }
}
// CSS
.red {
    color: red;
}
.red.blue {
    color: purple;
}

@extend

// SCSS
.button {
    border-radius: 3px;
    font-size: 13px;
}
.button-primary {
    @extend .button;
    color: #fff;
    background: $blue;
}
.button-secondary {
    @extend .button;
    color: #555;
    background: $light-grey;
}
// CSS
.button,
.button-primary,
.button-secondary {
    border-radius: 3px;
    font-size: 13px;
}
.button-primary {
    color: #fff;
    background: $blue;
}
.button-secondary {
    color: #555;
    background: $light-grey;
}
// SCSS
%button {
    border-radius: 3px;
    font-size: 13px;
}
.button-primary {
    @extend %button;
    color: #fff;
    background: $blue;
}
.button-secondary {
    @extend %button;
    color: #555;
    background: $light-grey;
}
// CSS
.button-primary,
.button-secondary {
    border-radius: 3px;
    font-size: 13px;
}
.button-primary {
    color: #fff;
    background: $blue;
}
.button-secondary {
    color: #555;
    background: $light-grey;
}

Mixins

// SCSS

@mixin button($background: blue) {
  background: $background;
  border: 1px solid darken($background, 5%);
}

.button-primary {
  @include button;
}

.button-secondary {
  @include button(#eee);
}
// CSS

.button-primary {
  background: blue;
  border: 1px solid #0000e6;
}

.button-secondary {
  background: #eeeeee;
  border: 1px solid #e1e1e1;
}

Loops

// SCSS
@for $i from 1 through 3 {
  .item-#{$i} {
    margin-left: 10px * $i;
  }
}
// CSS
.item-1 {
  margin-left: 10px;
}

.item-2 {
  margin-left: 20px;
}

.item-3 {
  margin-left: 30px;
}
    
// SCSS
$i: 3;
@while $i > 0 {
  .while-#{$i} { width: 30px * $i; }
  $i: $i - 1;
}
// CSS
.while-3 {
  width: 90px;
}

.while-2 {
  width: 60px;
}

.while-1 {
  width: 30px;
}
// SCSS
$array:('grumpy', 'nyan', 'felix-the');

@each $cat in $array {
  .#{$cat}-cat {
    content: '#{$cat} cat';
  }
}
// CSS
.grumpy-cat {
  content: "grumpy cat";
}

.nyan-cat {
  content: "nyan cat";
}

.felix-the-cat {
  content: "felix-the cat";
}

Sass Maps

$mappy-map: (
  key: value,
  another-key: another-value
);
// SCSS
$mappy-map:(
  key: value,
  another-key: another-value
);

.demo {
  @each $key, $value in $mappy-map {
      #{$key}: $value;
  }
}
// CSS
.demo {
  key: value;
  another-key: another-value;
}
// SCSS
$buttons:(
  primary:(
    background: blue
  ),
  secondary:(
    background: green
  )
);

@each $type in map-keys($buttons) {
  .button-#{$type} {
    $button-color: map-get(map-get($buttons, $type), background);

    @include button($button-color);
  }
}
// CSS
.button-primary, .button-secondary {
  border-radius: 3px;
  font-size: 13px;
}

.button-primary {
  background: blue;
  border-color: #0000e6;
}

.button-secondary {
  background: green;
  border-color: #006700;
}

The Ultimate Button

// SCSS
// Color variables
$darkwing-duck-purple: #582e76;
$launchpad-red: #7e1a03;

// Placeholder selector for @extend
%button {
  border-radius: 3px;
  font-size: 13px;
}

// Mixin
@mixin button($background: blue) {
  @extend %button;

  background: $background;
  border-color: darken($background, 5%);
}

// Map that sets options
$buttons:(
  primary:(
    background: $darkwing-duck-purple,
  ),
  secondary:(
    background: #eee,
  )
);

// Loopy loop loop
@each $type in map-keys($buttons) {
    .button-#{$type} {
      $button-color: map-get(map-get($buttons, $type), background);

        @include button($button-color);
    }
}
// CSS
.button-primary, .button-secondary {
  border-radius: 3px;
  font-size: 13px;
}

.button-primary {
  background: #582e76;
  border-color: #4a2764;
}

.button-secondary {
  background: #eeeeee;
  border-color: #e1e1e1;
}

Fuck yea

Demo Time

Michael Arestad @michaelarestad

Chris Holder @see8ch

Demos

Use a spacebar or arrow keys to navigate