in our CSS 2. Nest selectors for organization 3. Modularize with partials, mixins & functions 4. Extend/inherit style rules 5. Perform math on properties
@import 'type'; @import 'forms'; @import 'global'; @import 'helpers'; Any filename that starts with an _ is a partial, and SASS won’t output it. The one file without an _ is what SASS watches. It imports all the partials and outputs a single CSS file. You can output multiple files if you want to.
{ background-color: #aaa; } } /* ===================================== */ nav.global { width: 100%; } nav.global a { background-color: #ddd; } nav.global a:hover { background-color: #aaa; } You can keep your code well organized while outputting proper selectors. Obey the Inception Rule. Try not to nest much deeper than 3 levels.
$radius; } /* ===================================== */ .container { @include border-radius(8px); } /* ===================================== */ .container { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } Mixins create a group of styles that can accept arguments and be reused.
100%; } aside { float: right; width: (300px / 960px) * 100%; } /* ===================================== */ article { float: left; width: 62.5%; } aside { float: right; width: 31.25%; } SASS allows simple math in your CSS, preserving your original units. This is not like calc() in CSS. You must use similar units.
names. Functions can be used to calculate all of the properties we need. Mixins can be used to attach our styles to semantic class names. <div class="container"> <header role="banner">...</header> <div role="main"> <section class="hero">...</section> <section class="partner-quotes"> <h2>Quotes From Our Partners</h2> <div class="cosby">...</div> <div class="jobs">...</div> <div class="wilde">...</div> <div class="letterman">...</div> <div class="franklin">...</div> <div class="twain">...</div> </section> <section class="executive-team"> <h2>Our Executive Team</h2> <div class="ceo">...</div> <div class="other-executives"> <div class="cto">...</div> <div class="cmo">...</div> <div class="coo">...</div> <div class="cio">...</div> </div> </section> </div> <footer role="contentinfo">...</footer> </div>