-
-
Save bpainter/9169168 to your computer and use it in GitHub Desktop.
http://codepen.io/bpainter/pen/IkByq | |
A little nesting goes a long way. | |
http://codepen.io/bpainter/pen/aophg | |
- Only be as specific as you need to be. | |
- General rule of thumb - Don't nest more than 3 levels. It's a good indicator that you're being overly specific with your selectors. | |
- Always review your output (especially when you're first starting out). If the CSS being generated starts to look a bit off, review how you're writing your Sass. | |
http://codepen.io/bpainter/pen/fztwl |
Modernizer
http://codepen.io/bpainter/pen/CdaAo
Variables
http://codepen.io/bpainter/pen/eIJyh
Math Operations
http://codepen.io/bpainter/pen/EmeiL
Simple Mixin
http://codepen.io/bpainter/pen/yAJiE
Advanced Mixin
http://codepen.io/bpainter/pen/fcHIJ
Mixin vs Extend - Part 1
http://codepen.io/bpainter/pen/qKEmL
Mixin vs Extend - Part 2
http://codepen.io/bpainter/pen/fEirL
Mixin vs Extend - Part 3
http://codepen.io/bpainter/pen/rnHgt
Mixin vs Extend - Part 4
Functions
http://codepen.io/bpainter/pen/BtIiu
Directives - If
http://codepen.io/bpainter/pen/nJuHk
Each Loop
http://codepen.io/bpainter/pen/LaquJ
While Loop
http://codepen.io/bpainter/pen/mIvjx
Media Queries - Simple
http://codepen.io/bpainter/pen/zjJvG
Media Queries - Super smooth
http://codepen.io/bpainter/pen/rJeLA
StackIcons, related to mapping svg to keycodes: http://css-tricks.com/stackicons-icon-fonts/
You can reference parent selectors by using the '&'. The Parent reference selector is a powerful feature to be used along with nesting. A simple example:
A Tags