Tame Your CSS
With Sass
Wifi: csguest / capstratvisitor
the most important Sass feature
you'll ever learn
Variables
a { color: $link-color; }
extending
.component { @extend .widget; }
Pro tip: use % to extend a silent class.
Nesting
.heading {
color: gray;
.title { color: red; }
}
Pro tip: you should nest as little as possible.
Parent Selector
a {
color: pink;
&:hover { color: hotpink; }
}
Pro tip: the parent selector goes great with
Modernizr
Operations
a { color: #F00 - #111; }
Standard arithmetic: + - * / %
Color Functions
a {
color: red;
&:hover {
color: darken(red, 10%);
}
}
Color functions: lighten, darken, transparentize, mix, desaturate, grayscale, invert and
more.
Functions
@function em($px, $base: 16px) {
@return ($px / $base) * 1em;
}
a { font-size: em(14px); }
Pro tip: arguments can be made optional
by assigning default values
Mixins
@mixin my-background($color) {
background: $color
linear-gradient(
to bottom,
lighten($color, 10%),
darken($color, 10%)
);
}
a { @include my-background($link-color); }
Keyword Arguments
@mixin shadow($x: 1px, $y: 1px, $size: 1px) {
box-shadow: $x $y $size black;
}
// ordered arguments //
@include shadow(2px, 3px, 4px);
// keyword arguments //
@include shadow($size: 5px);
Interpolation
.#{$prefix}-widget { color: blue; }
Loops
@for $i from 1 through 8 {
.column-#{$i} { width: 80px * $i; }
}
$social-icons: twitter, facebook, linkedin
@each $icon in $social-icons {
.#{$icon}-icon {
background-image: url('/images/#{$icon}.png');
}
}
Can also use @while for looping
if/else
@mixin text-background($color) {
color: $color;
@if lightness($color) > 50% {
background: black;
} @else {
background: white;
}
}
Content Blocks
@mixin mq($size) {
@media (min-width: $size) {
@content;
}
}
@include mq(600px) {
p { background: green; }
}