SCSS Cheatsheet

README.md

SCSS

• Website: http://sass-lang.com/
• Docs: http://sass-lang.com/guide
• Tutorial: https://www.codecademy.com/learn/learn-sass

Global Setup

Install on OS X: sudo gem install sass

CLI Usage

Version info: sass -v

Compile: sass styles.scss styles.css

Auto-Compile for single files: sass --watch styles.scss:styles.css

Auto-Compile for folders: sass --watch .

Notes

• There is no difference between underscores and dashes in variables: $my_var === $my-var
• Skip default spaces with a leading ampersand: &:hover
• Skip default nesting with an ending ampersand body.blog &
• Prevent compiling for @import with a leading underscore: _normalize.scss

Functions

Docs: http://sass-lang.com/documentation/Sass/Script/Functions.html

mixins.scss

// Useful Mixins

@mixin shadow( $x, $y, $blur, $color ) {
  -webkit-box-shadow: $x $y $blur $color;
  -moz-box-shadow: $x $y $blur $color;
  box-shadow: $x $y $blur $color;
}

@mixin animate( $property: all, $duration: 1s, $easing: ease ) {
  -webkit-transition: $property $duration $easing;
  -moz-transition: $property $duration $easing;
  -o-transition: $property $duration $easing;
  transition: $property $duration $easing;
}

@mixin links( $normal, $visited, $hover ) {
  &:visited {
    color: $visited;
  }
  &:hover, &:active, &:focus {
    color: $hover;
  }
}

snippets.scss

.clearfix {
    &:before,
    &:after {
        content: "";
        display: table;
    }
 
    &:after { clear: both; }
}

styles.scss

// SCSS comments (not visible in CSS)
/* CSS comments (visible in CSS) */


// Variables
$color: black;

p {
  color: $color;
}


// Nesting & Abbreviation
aside {
  border: {
    width: 1px;
    style: solid;
    color: $color;
  }
}

nav {
  background: none;
  ul {
    list-style-type: none;
    a {
      color: $color;
      &:hover, &:focus, &:active { // Skip default space: `a:hover` instead of `a :hover`
        color: red;
      }
    }
  }
  body.blog & { // Skip default nesting: `body.blog nav` instead of `nav body.blog`
    background: green;
  }
}

// Extend/Inheritance
.infobox {
  border: 1px solid #ccc;
  padding: 10px;
  color: $color;
}

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

// The % prefix creates rules that never get used on their own.
// Theses classes are solely for the purpose of extending.
%info {
  position: absolute;
}

.notice {
  @extend %info;
}


// Mixins
@mixin outline {
  border: 1px solid black;
}
@mixin animate( $property, $duration, $easing ) {
  transition: $property $duration $easing;
}
@mixin default_animate( $property: all, $duration: 1s, $easing: ease ) { // Mixin with defaults
  transition: $property $duration $easing;
}

aside {
  border-radius: 10px;
  @include outline;
}

a {
  @include animate( all, 1s, linear );
}
nav a {
  @include default_animate( $duration: 3s ); // Use defaults with custom $duration
}


// Operators: +, -, *, /, and %
.container {
  width: 600px / 960px * 100%;
}


// Functions
$highlight: green;

p {
  color: lighten( $highlight, 20% );
}
p {
  color: darken( $highlight, 10% );
}
p {
  color: fade-out( $highlight, 0.5 );
}
p {
  color: adjust-hue( $highlight, 90 ); // Usually between -360 degrees and 360 degrees.
}
p {
  color: red + blue; // Compiles to magenta.
}

// Loops
$list: (orange, purple, teal);
@each $item in $list {
  .#{$item} {
    background: $item;
  }
}

$total: 10;
$step: 360deg / $total;
@for $i from 1 through $total {
   .ray:nth-child(#{$i}){
      background: adjust-hue( blue, $i * $step );
   }
}

// If/Else
p {
  margin-left: if( $i % 2 == 0, 0px, 50px );
}


// Import/Embed (.scss files only)
@import 'normalize' // Prevent separate compiling with a leading underscore: `_normalize.scss`