Sass cheatcheet

/* 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; }