Jan 27, 2015
What we'll Learn
Learn the SASS SyntaxUtilize Compass for compilingTake a look at Basic and learn how to put our knowledge to practice
What is SASS?
Syntactically Awesome Stylesheets.
What is SASS?
Sass makes CSS fun again.
What is SASS?SCSS (Sassy CSS. Newer syntax)a superset of CSS3’s syntaxSASS (Older syntax)uses indentation instead of brackets and semi-colons
What is SASS?
nested rulesvariablesmixinsselector inheritance
Installing SASS
need Ruby, Gem, and HAMLOSX: http://hivelogic.com/articles/compiling-ruby-rubygems-and-rails-on-snow-leopardLinux: you probably can figure this out....Windows: good luck...
What is Compass?
Compass is a stylesheet authoring tool that uses the Sass stylesheet language to make your stylesheets
smaller and your web site easier to maintain.
Installing Compass
gem install compass
What we'll use Compass for...automajically compile our SASS files
# Require any additional compass plugins here.project_type = :stand_alone# Set this to the root of your project when deployed:http_path = "/"css_dir = "css"sass_dir = "sass"images_dir = "images"javascripts_dir = "js"output_style = :compact# To enable relative paths to assets via compass helper functions. # Uncomment:# relative_assets = true
But...as of SASS 3...
files prefixed with underscore are ignored.
sass --watch sass:css (sassdir:outputdir)
Examples: Nested RulesSASSSCSS
table.hl { margin: 2em 0; td.ln { text-align: right; }}
li { font: { family: serif; weight: bold; size: 1.2em; }}
table.hl margin: 2em 0 td.ln text-align: right
li font: family: serif weight: bold size: 1.2em
Examples: Nested Rules
table.hl { margin: 2em 0;}table.hl td.ln { text-align: right;}
li { font-family: serif; font-weight: bold; font-size: 1.2em;}
CSS
Examples: VariablesSASSSCSS
$blue: #3bbfce;$margin: 16px;
.content-navigation { border-color: $blue; color: darken($blue, 9%);}
.border { padding: $margin / 2; margin: $margin / 2; border-color: $blue;}
$blue: #3bbfce$margin: 16px
.content-navigation border-color: $blue color: darken($blue, 9%)
.border padding: $margin / 2 margin: $margin / 2 border-color: $blue
Examples: Variables
.content-navigation { border-color: #3bbfce; color: #2b9eab;}
.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
CSS
Examples: MixinsSASSSCSS
@mixin table-base { th { text-align: center; font-weight: bold; } td, th {padding: 2px}}
@mixin left($dist) { float: left; margin-left: $dist;}
#data { @include left(10px); @include table-base;}
@mixin table-base th text-align: center font-weight: bold td, th padding: 2px
@mixin left($dist) float: left margin-left: $dist
#data @include left(10px) @include table-base
Examples: Mixins
#data { float: left; margin-left: 10px;}#data th { text-align: center; font-weight: bold;}#data td, #data th { padding: 2px;}
CSS
Examples: Selector InheritanceSASSSCSS
.error { border: 1px #f00; background: #fdd;}.error.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { @extend .error; border-width: 3px;}
.error border: 1px #f00 background: #fdd
.error.intrusion font-size: 1.3em font-weight: bold
.badError @extend .error border-width: 3px
Examples: Selector Inheritance
.error, .badError { border: 1px #f00; background: #fdd;}
.error.intrusion,
.badError.intrusion { font-size: 1.3em; font-weight: bold;}
.badError { border-width: 3px;}
CSS
Examples: Conditional StatementsSASS=views-row($margin: $baseline, $divide: false, $border_color: #CCC) +pie-clearfix @if $divide border-bottom: 1px solid $border_color margin-bottom: $margin * 0.5 @else margin-bottom: $margin * 0.5 p &:last-of-type margin-bottom: 0
#main-content .item +views-row($baseline, true, $brand_blue)
Other LanguagesSASS, Less, Turbine, Switch CSS, CSS Cacheer, CSSPP, ... and more.
http://bit.ly/CSSPreprocessors
Convert!$ css2sass input output (older syntax)$ sassconvert [options] input output (newer syntax)$ sass-convert --from less --to scss --recursive .
Convert!Textmate Bundlehttp://github.com/seaofclouds/sass-textmate-bundleFoldable Blocks in Texmatehttp://nimbupani.com/foldable-css-blocks-in-sass-with-textmate.html
Drupal ResourcesCompass: http://drupal.org/project/compassBasic: http://drupal.org/project/basicLess: http://drupal.org/project/less