Cacher is the code snippet organizer for pro developers

SASS Syntactically Awesome Stylesheets

• Easier to write SASS than CSS
• Compiles to CSS for browsers to interpret

Converting to SASS:

sass main.sccc main.css

• sass command takes 2 args:
  • the input: main.scss
  • the location of where to put that output: main.css

Nesting selectors:

• : placing selectors within the scope of another selector
• Selectors that are nested are referred to as children
• Selctors that contain other selectors are known as parents

.parent {
  color: blue;
  .child {
    font-size: 12px;
  }
}
// Compiles to the following CSS:
.parent {
  color: blue;
}

.parent .child {
  font-size: 12px;
}

• You can also nest CSS PROPERTIES! using ':' before after the suffix of the property

.parent {
  font : {
    family: Roboto;
    size: 12px;
    decoration: none;
  }
}

// Which converts to the following CSS:
.parent {
  font-family: ;
  font-size: ;
  font-decoration: ;
}

• Variables in SASS are denoted $

$trans-white = rgba(255,255,255,0.3);

Sassy Datatypes:

• Numbers: 8.11, 12 and 10px
• Strings of texts: "potatoe", 'tomato', span
• Booleans: true, false
• null: an empty value
• Lists: can be separated by spaces or commas

1.5em Helvetica bold;

• Maps: similar to lists but are referenced as a hash, with a key value pair

(key1: value1, key2: value2);

Using the '&' operator in nesting a pseudo-element:

.notecard {
  &:hover {
    @include transform (rotatey(-180deg));
  }
}
// Compiles into this CSS
.notecard:hover {
  transform: (rotatey(-180deg));
}