### 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
```sass
.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));
}
```