Sass Syntactically Awesome Style Sheets Sass? Why? CSS is repetitive CSS .module { ... } .module .title { ... } .module .title span { ... } .module .footer { ... } CSS is very repetitive Variables Functions Modules What is Sass? Sass // SCSS syntax $color: #f00; .link { color: $color; text-decoration: underline; &:hover { text-decoration: none; } } // Sass syntax $color: #f00 .link color: $color text-decoration: underline &:hover text-decoration: none You can start now. How to install $> gem install sass $> sass --watch scss:css style.scss > style.css Don’t edit the .css file! PITFALL Using Sass Nesting Sass .modal { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.3); .modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; } .modal-footer { padding: 14px 15px 15px; text-align: center; } } CSS .modal { background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.3); } .modal .modal-header { padding: 15px 20px; border-bottom: 1px solid #eee; } .modal .modal-footer { padding: 14px 15px 15px; text-align: center; } Don’t mimic DOM! PITFALL