Sass Chops

gistfile1.scss

/*
hsla "Hue Saturation Brightness" + opacity

modified BEM synatx:
  top_level_component--substyle
  
& = "parent class"
*/

.notification {
  padding: 1em;
  & + .notification {
    margin: 1em;
  }
  .title & {
    content: "title";
  }
}
// =>
.notification + .notification{
  margin: 1em;
}

.title .notification {
  content: "title";
}


/*
Both mixins and extends allow you to reuse code

mixins are like functions that allow you to pass in variables

extends don't take variables and reuse code by chaining selectors
*/

/* 
functions:

define your own, or use one of the many pre-build functions
  e.g, adjust color function
  
use just like a mixin

*/

/*
SASS has conditionals

easiest one to use is

@if ( condition ) {
  // do if true
} @else {
  // do if false
}
*/