Installing in Mac:
gem install sass
comments: use /* */ for anything that will appear on the compiled file, and // for things that only show on the sass development files
When compiling, you can specify if you want your file compacted:
sass yourfile.scss ../css/yourfile.css –style compressed
Other styles: nested, compact, expanded
One of the most powerful features, mixings (example):
@mixin blue_text($size) {
color: #336699;
font-family: helvetica, arial, sans-serif; font-size: $size;
font-variant: small-caps; }
.product_title {
@include blue_text (15px); }
Example of rounded corners mixin:
@mixin rounded_borders($color, $width: 5px, $rounding: 5px) { -moz-border-radius: $rounding $rounding; -webkit-border-radius: $rounding $rounding; -khtml-border-radius: $rounding $rounding; -o-border-radius: $rounding $rounding;border-radius: $rounding $rounding;
border: $width $color solid; }
For mixings, it is always a good idea to put them on their own import file for maintainability (example):
@import “cross_browser_opacity.scss”; .h1 {@include opacity(60); }
@mixin opacity($opacity) {
filter: alpha(opacity=#{$opacity}); // IE 5-9+ opacity: $opacity * 0.01; }
Interpolation means you can have rule definitions that are dynamic:
.red_#{$carname} will generate .red_volvo if volvo is $carname
Here is an example of using this:
@mixin car_make($car_make, $car_color) {
// Set the $car_make with “_make” at the end as a class .car.#{$car_make}_make {
color: $car_color;
width: 100px;
.image {
background: url(“images/#{$car_make}/#{$car_color}.png”); }
} }
And, this is the way you iterate in sass:
@each $member in thom, jonny, colin, phil { .#{$member}_picture {
background-image: url(“/image/#{$member}.jpg”); } }
But just wait a minute: you can also use if statements:
@mixin country_color($country) { @if $country == france {
color: blue; }
@else if $country == spain {
color: yellow; }
@else if $country == italy {
color: green; } @else {
color: red; } }
Writting media queries:
.main {
color: #336699; font-size: 15px; @media print { font-size: 10px; } }
This compiles to:
.main {
color: #336699; font-size: 15px; } @media print {
.main {
font-size: 10px; } }