| <h1>Nesting - CSS</h1> | |
| <p>We have a basic navigation structure that will illustrate how we might translate it to Sass. If we were writing normal CSS this is how it would look.</p> | |
| <p>If you look closely at our CSS rules they are overly specific. Whether you're writing CSS or Sass, only be as specific as you have to be. It'll save you many specificity headaches later on.</p> | |
| <nav role="navigation"> | |
| <ul> | |
| <li><a href="#">Home</a></li> | |
| <li><a href="#">Portfolio</a></li> | |
| <li><a href="#">About</a></li> | |
| <li><a href="#">Contact</a></li> |
| <h1>Variables</h1> | |
| <p>Think of variables as handy places to store values that you want to reuse over and over again throughout your Sass document. Good examples for using a variable is to store font stacks, common margin and padding, font sizes, & colors.</p> | |
| <ol> | |
| <li>Sans Serif Font Stack</li> | |
| <li>Serif Font Stack</li> | |
| <li>Accent Color</li> | |
| </ol> |
| <h1>SCSS (Sassy) Syntax</h1> | |
| <p>The SCSS syntax was implemented a while after the Sass syntax. SCSS isn't white space dependent and looks and functions just like writing normal CSS.</p> | |
| <div class="columns"> | |
| <div class="col1">Column 1</div> | |
| <div class="col2">Column 2</div> | |
| <div class="col3">Column 2</div> | |
| </div> |
| <h1>Sass Syntax</h1> | |
| <p>The Sass syntax is the original syntax. It is white-space dependent and doesn't require curly braces or semi-colons. A gotcha to keep in mind is that your tabbing has to be consistent. You can't mix spaces or tabs and the tab length should be consistent otherwise the compiler will eat flaming death.</p> | |
| <div class="columns"> | |
| <div class="col1">Column 1</div> | |
| <div class="col2">Column 2</div> | |
| <div class="col3">Column 2</div> | |
| </div> |
| Add a comment with with front-end, back-end or design so I can get you placed in the correct team. |
The W3C has changed their approach a bit with CSS3. They've made things modular and each module is designed to be implemented separately and independently from each other.
This is good for us because it (hopefully) helps the spec move forward faster and allows browser makers to implement module by module.
It lets us play with lots of the new CSS3 properties that aren't 100% complete.
| %fieldset | |
| %legend | |
| %label{:for => "checkbox-group"} Group of Checkboxes | |
| .fields.inline | |
| .field.checkbox | |
| %input{:type => "checkbox", :id => "checkbox-1", :name => "checkbox-group", :value => "", "aria-checked" => "false"} | |
| %label{:for => "checkbox-1"} First Checkbox | |
| .field.checkbox | |
| %input{:type => "checkbox", :id => "checkbox-2", :name => "checkbox-group", :value => "", "aria-checked" => "true", "aria-labeledby" => "l-checkbox-2"} | |
| %label{:for => "checkbox-2"} Second Checkbox |
| * Studio Banks | |
| * Skookum | |
| * Wray Ward | |
| * Boone Oakley | |
| * WebsiteBiz | |
| * Myjive |
| @import "compass"; | |
| // Math Operators | |
| // =, -, *, /, % | |
| // 5em + 5em; // 2em | |
| // 5em - 2em; // 3em | |
| // 1in + 72pt; // 2in | |
| // 6px * 100; // 600px | |
| // 18 & 5; // 3 |