Ro Tite Duhg

storm troopers getting sassy

You've chosen Sass, huh? Well shoot, that's awesome! Sass puts CSS into hyperdrive with nesting, mixins, iteration functions, and much more. To get you all warmed up with Sass, I present you with a handy cheat sheet for all your Sass explorations.

If you'd like to jump into Sass alongside this cheat sheet, codepen is an awesome place to start! Just select the gear icon in your pen's css pane then switch up the css preprocessor to scss.

The most commonly used features of Sass are down below but if you'd like to see the full monty, check out the Sass language documentation.

Sass of Contents

Sass & Gulp

  var gulp = require('gulp'),
    sass = require('gulp-sass'),
    sassGlob = require('gulp-sass-glob'),
    postcss = require('gulp-postcss'),
    cssnano = require('gulp-cssnano'),
    extReplace = require('gulp-ext-replace');

gulp.task('sass', function() {

  return gulp.src('sass/site.scss')
    .pipe(sassGlob())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('css'))
    .pipe(postcss([
      require('autoprefixer')({
        browsers: ['> 1%'],
        cascade: false
      })
    ]))
    .pipe(cssnano())
    .pipe(extReplace('.min.css'))
    .pipe(gulp.dest('css'));

});

Variables

  $color: rgba(#aae, .25);
$number: 20;
$string: 'Jamba Juice';
$list: 'Item', 'Item';
$boolean: true;

$nestedList: (
  ('Berry', 80),
  ('Troup', 100)
);

$map: (
  Bubble: 'Pop',
  Trouble: 'Maker'
);

Interpolation

  $theme: 'jazz';
$moogle: 8;
$lg: '(min-width: ' + 900px + ')';

.theme_#{$theme} {
  font-size: $moogle#{em};

  @media #{$lg} {}
}

Math

  .bombay {
  margin: random(100) * 1% 0;
  padding: $chocobo * 2em;
  line-height: (24 / 16);
}

Nesting

  // Input
.straddle {

  @media print {}

  &:focus,
  &:hover {}

  &[attr*="wiggle"] {}

  @at-root .track {}
}

  // Output
.straddle {}

@media print {
  .straddle {}
}

.straddle:focus,
.straddle:hover {}

.straddle[attr*="wiggle"] {}

.track {}

Conditionals

  .ballin {
  $space: 'power';

  @if $space == 'jam' {
    transform: scale(1, -1);
  } @else if $space == 'power' {
    transform: scale(-1, 1);
  } @else {
    transform: scale(0, 0);
  }

  $doodle: 20;

  @if $doodle < 0 {
    background: #eaa;
  } @else if $doodle == 0 {
    background: #aea;
  } @else {
    background: #aae;
  }
}

Mixins

  @mixin turbo($background, $color: '#afa') {
  background: $background;
  color: $color;
}

.speeder {
  @include turbo(#000);
}

For Loops

  .zazzle {

  @for $i from 1 through 20 {

    &:nth-child(#{$i}) {
      background: hsl((255 / 20) * $i, 90, 60);
    }
  }
}

Each

  $theme-colors: (
  (blue, $blue),
  (mint, $mint)
);

@each $label, $color in $theme-colors {

  .theme-#{$label} & {
    color: $color;
  }
}

$social-themes: (
  facebook: #3b5998,
  twitter: #55acee
);

@each $label, $color in $social-themes {

  .theme-#{$label} {
    color: $color;
  }
}

Sassallation of Contents

That's all y'all!

cool guy walking away from an explosion

Dang, sass is dope. How do you use your blingin sass everyday? Drop a comment down below and let's get this cheat sheet really rollin!


2,676 6 55