SASS :: CHEATSHEET

SASS :: CHEATSHEET

/* Variable: */
$red: #ff0000;
 
.myClass {
color: $red;
}
 
/* !default: If a variable isn't given a value, it uses the one set for default */
$color: #000000;
$color: #ff0000 !default;
 
.myClass {
color: $color;
}
 
/* compiles to black - if color isn't defined, then it gets red */
.myClass {
color: #000000;
}
 
/* Mixin: Re-use whole chunks of CSS, properties or selectors */
@mixin myfont ($size, $weight, $family){
  font: {
    size: $size;
    weight: $weight;
    family: $family;
  }
}
 
.myClass {
@include font(18px, "bold", "Arial,Helvetica,sans-serif");
}
 
/* Nesting: Avoids repetition by nesting selectors within one another */
nav ul {
  margin: 0;
  padding: 0;
  li {
    list-style: none;
    display: inline;
    a {
       color: $red;
    }  
}
}
 
/* Nested Properties */
.myFont {
  font:{
    family: Arial;
    size: 14px;
    weight: bold;
  }
}
 
/* Selector Inheritance (Using @extend): Give a selector the styles of one,
PLUS any additional. This way you don't repeat classes. */
.myClass {
color: #ff0000;
margin: 10px;
}
.anotherClass {
@extend .myClass;
border: 1px #000 solid;
}
 
/* '&': Referencing Parent Selectors */
a {
  color: #ff0000;
  &:hover {
    color: #666666;
  } 
}
 
/* Operations: +, -, *, /, %*/
$width: 1000px;
.myClass {
  width: $width - 400px;
}
 
/* Interpolation: #{} */
$className: samcro;
$attr: background;
a.#{$className} { #{$attr}-color: #000000 }
 
/* compiles to */
a.samcro {
background-color: #000000;
}
 
/* Partials: Additional Sass/SCSS files you want to import but don't want
to compile into additional CSS files (meaning styles are imported into the
main .scss file) */
/* Just save the new file with an underscore in front of it: _nav.scss,
then in the main sass/scss file type - (NOTE - just found out you will get an error if you do not have it AFTER your declared variables and stuff) */
@import "nav";
 
/* @if, @elseif, @else */
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
 
/* @for - could really badass on lists if you needed them each to have
unique styles (@while works similar) */
@for $i from 1 through 3 {
  .myClass-#{$i} { width: 2px * $i; }
}
 
/* compiles to */
.myClass-1 {
  width: 2px; }
.myClass-2 {
  width: 4px; }
.myCass-3 {
  width: 6px; }