Sass, which stands for "Syntactically Awesome Stylesheets", is a meta-language that provides simpler, more elegant syntax for CSS. Joel Oliveira and Adam Darowski will explain how Sass can improve your CSS-wrangling quality of life. They will explain what Sass is, what the benefits are, and go through some step-by-step examples of how you can put it to use in your own workflow.
15. Compress / Minify
~/sites/designsponge joel $ ls -hal style.css
-rw-r--r-- 1 joel staff 32K Mar 18 11:26 style.css
~/sites/designsponge joel $ cp style.css style.scss
~/sites/designsponge joel $ sass -t compressed style.scss
style_compressed.css
~/sites/designsponge joel $ ls -hal *.*css
-rw-r--r-- 1 joel staff 32K Mar 18 11:26 style.css
-rw-r--r-- 1 joel staff 32K Mar 18 11:33 style.scss
-rw-r--r-- 1 joel staff 26K Mar 18 11:34 style_compressed.css
37. More with mixins:
• Re-usable interface elements (buttons,
headers—with or without arguments).
• Reset styles (data tables, lists, etc.).
• References to frequently-accessed sprites.
• Frequently used IE hacks.
• Etc.
62. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Pass in
margin-left: ($start_value*8) + px arguments for
start and end
$length: $end - $start
year.
width: ($length*8) - 4px
63. The mixin:
@mixin bar($start,$end)
$start_value is
$start_value: $start - 1870
the difference
margin-left: ($start_value*8) + px between the
$length: $end - $start start year and
width: ($length*8) - 4px 1870.
64. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Multiply
$start_value by
margin-left: ($start_value*8) + px
8 to get the left-
$length: $end - $start margin (8 pixels
width: ($length*8) - 4px per year).
65. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Career $length
will be used to
margin-left: ($start_value*8) + px
determine the
$length: $end - $start width of the
width: ($length*8) - 4px box.
66. The mixin:
@mixin bar($start,$end)
$start_value: $start - 1870 Again, multiply
margin-left: ($start_value*8) + px by 8 to get the
width, and also
$length: $end - $start
subtract 4 pixels
width: ($length*8) - 4px (padding).