Pacific Northwest Drupal Summit: Basic & SASS

What we'll Learn Learn the SASS Syntax Utilize Compass for compiling Take 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 syntax SASS (Older syntax) uses indentation instead of brackets and semi-colons

What is SASS? nested rules variables mixins selector inheritance

Installing SASS need Ruby, Gem, and HAML OSX: http://hivelogic.com/articles/compiling- ruby-rubygems-and-rails-on-snow-leopard Linux: 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... sass --watch sass:css (sassdir:outputdir) files prefixed with underscore are ignored.

Examples: Nested Rules SCSS SASS table.hl { table.hl margin: 2em 0; margin: 2em 0 td.ln { td.ln text-align: right; text-align: right } } li font: li { family: serif font: { weight: bold family: serif; weight: bold; size: 1.2em size: 1.2em; } }

Examples: Nested Rules CSS table.hl { margin: 2em 0; } table.hl td.ln { text-align: right; } li { font-family: serif; font-weight: bold; font-size: 1.2em; }

Examples: Variables SCSS SASS $blue: #3bbfce; $blue: #3bbfce $margin: 16px; $margin: 16px .content-navigation { border-color: $blue; .content-navigation color: border-color: $blue darken($blue, 9%); color: darken($blue, 9%) } .border .border { padding: $margin / 2 padding: $margin / 2; margin: $margin / 2 margin: $margin / 2; border-color: $blue border-color: $blue; }

Examples: Variables CSS .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }

Examples: Mixins SCSS SASS @mixin table-base { @mixin table-base th { th text-align: center; text-align: center font-weight: bold; font-weight: bold } td, th {padding: 2px} td, th } padding: 2px @mixin left($dist) { @mixin left($dist) float: left; float: left margin-left: $dist; } margin-left: $dist #data { #data @include left(10px); @include left(10px) @include table-base; } @include table-base

Examples: Mixins CSS #data { float: left; margin-left: 10px; } #data th { text-align: center; font-weight: bold; } #data td, #data th { padding: 2px; }

Examples: Selector Inheritance SCSS SASS .error { .error border: 1px #f00; border: 1px #f00 background: #fdd; background: #fdd } .error.intrusion { .error.intrusion font-size: 1.3em; font-size: 1.3em font-weight: bold; font-weight: bold } .badError { .badError @extend .error; @extend .error border-width: 3px; border-width: 3px }

Examples: Selector Inheritance CSS .error, .badError { border: 1px #f00; background: #fdd; } .error.intrusion, .badError.intrusion { font-size: 1.3em; font-weight: bold; } .badError { border-width: 3px; }

Examples: Conditional Statements SASS =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 Languages SASS, 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 Bundle http://github.com/seaofclouds/sass-textmate-bundle Foldable Blocks in Texmate http://nimbupani.com/foldable-css-blocks-in-sass-with-textmate.html

Drupal Resources Compass: http://drupal.org/project/compass Basic: http://drupal.org/project/basic Less: http://drupal.org/project/less

http://thejibe.com	1938
http://www.thejibe.com	3
http://vtunnel.com	1
http://webcache.googleusercontent.com	1

Pacific Northwest Drupal Summit: Basic & SASS

by Steve Krueger

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 1,943

Statistics

Pacific Northwest Drupal Summit: Basic & SASS Presentation Transcript