1. Compiler sass from scss(Syntax css), icss(Indented css) to css, all valid css can be write in scss
2. Variable: sass variables supported 100% css variables for 90%. --botton-color , $botton-color
3. maps: $fonts-weights: ("regular": 400, "bold":900); font-weight: map-get($fonts-weights, "bold")
4. Nesting: add & inside to be equal to parent. Using interpolation to transform inside the parent: #{&}__paragraph
5. Separation (partial): @import './reset'
6. Functions (return values) similar to JS: @function weight($wight-name){@return map-get($fonts-weights, $wight-name)}; font-weight: weight(bold)
7. Mixins (define styles): Similar to functions. @mixin flexCenter($direction) { display: flex; justify-content: center; align-items: center; flex-direction: $direction;} @include flexCenter(row);
8. Mixin + content : To replace values
9. @if : for if statement
10. @extend to extend a class style
11. Math Operations: In sass we can use operation without calc(). In sass we cann't mix the types 80% - 300px is not allowed