Sass Nathan Henderson Refresh Rochester – 6/25/2013 

CSS & pre-processors 

Syntactically Awesome Stylesheets 

Syntactically Awesome Stylesheets 

http://sass-lang.com 

Sass Basics 

body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } CSS body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } Nested CSS 

body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } Nested CSS 

body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; } #contents #sidebar { float: right; width: 200px; } #contents #main { width: 600px; background: #eeeeee; } #contents #main h2 { color: blue; } #footer { height: 200px; } Nested CSS 

body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS • SCSS = “Sassy CSS” • Default Sass syntax • Superset of CSS3 (CSS is SCSS!) • Nested selectors 

body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS • SCSS = “Sassy CSS” • Default Sass syntax • Superset of CSS3 (CSS is SCSS!) • Nested selectors • Nested properties too 

• SCSS = “Sassy CSS” • Default Sass syntax • Superset of CSS3 (CSS is SCSS!) • Nested selectors • Nested properties too body { font: { family: sans-serif; size: 30em; weight: bold; } } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS 

• SCSS = “Sassy CSS” • Default Sass syntax • Superset of CSS3 (CSS is SCSS!) • Nested selectors • Nested properties too • Indentation isn’t required, but… body { font: { family: sans-serif; size: 30em; weight: bold; } } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS 

body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass 

body { font-family: sans-serif; font-size: 30em; font-weight: bold; } #contents { width: 800px; #sidebar { float: right; width: 200px; } #main { width: 600px; background: #eeeeee; h2 { color: blue; } } } #footer { height: 200px; } SCSS body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass 

• “Sass” or “indented” syntax • White space aware (2 space soft tabs are your friends) • Completely optional (I know, it’s not for everybody) body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px Sass 

The Good Stuff 

The Good Stuff ✦ Variables 

Variables body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee 

Variables body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px 

Variables body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px 

Variables body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: $page-width - $sidebar-width background: $primary-color h2 color: blue #footer height: 200px 

Variables body font-family: sans-serif font-size: 30em font-weight: bold #contents width: 800px #sidebar float: right width: 200px #main width: 600px background: #eeeeee h2 color: blue #footer height: 200px // Variable Definitions $page-width: 800px $sidebar-width: 200px $primary-color: #eeeeee body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: ??? background: $primary-color h2 color: blue #footer height: 200px body font-family: sans-serif font-size: 30em font-weight: bold #contents width: $page-width #sidebar float: right width: $sidebar-width #main width: $page-width - $sidebar-width background: $primary-color h2 color: blue #footer height: 200px MATH 

Real World Example 

Real World Example // Dimensions $page_width: 960px $nav_tabs: 6 // number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1 

Real World Example // Dimensions $page_width: 960px $nav_tabs: 7 // number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1 

Real World Example // Dimensions $page_width: 960px $nav_tabs: 7 // number of navigation tabs $tab_width: round($page_width / $nav_tabs) - 1 

Using Variables ✦ Colors ✦ Font Stacks ✦ Margins & Padding ✦ Border widths ✦ Border radii 

The Good Stuff ✦ Variables ✦ Mixins 

Mixins @mixin large-text font-family: Helvetica, Arial, sans-serif font-size: 20px font-weight: bold color: #ff0000 

Mixins @mixin large-text font-family: Helvetica, Arial, sans-serif font-size: 20px font-weight: bold color: #ff0000 #content h1 @include large-text 

More Mixins @mixin ez-border($width, $color) border-width: $width border-style: solid border-color: $color 

More Mixins @mixin ez-border($width, $color) border-width: $width border-style: solid border-color: $color #aboutbox @include ez-border(2px, #eee) 

More Mixins @mixin ez-border($width, $color) border-width: $width border-style: solid border-color: $color #aboutbox @include ez-border(2px, #eee) @mixin ez-border($width: 2px, $color: #eee) border-width: $width border-style: solid border-color: $color #aboutbox @include ez-border 

More Mixins @mixin ez-border($width, $color) border-width: $width border-style: solid border-color: $color #aboutbox @include ez-border(2px, #eee) @mixin ez-border($width: 2px, $color: #eee) border-width: $width border-style: solid border-color: $color #aboutbox @include ez-border #aboutbox @include ez-border(1px, #444) 

Fun with Mixins ✦ Mixin definitions can include other mixins ✦ Try the ‘&’ parent selector ✦ Global variables in mixins 

The Good Stuff ✦ Variables ✦ Mixins ✦ Selector Inheritance “@extend” 

@extend .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 

@extend .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 .alert border: 1px #f00 background-color: #eee .criticalAlert @extend .alert border-width: 3px color: #8a0808 

@extend .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 .alert border: 1px #f00 background-color: #eee .criticalAlert @extend .alert border-width: 3px color: #8a0808 

Multiple @extends .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 .greatGooglyMoogly @extend .alert @extend .criticalAlert border-style: dashed 

Multiple @extends .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 .greatGooglyMoogly @extend .alert @extend .criticalAlert border-style: dashed .alert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 .greatGooglyMoogly @extend .alert, .criticalAlert border-style: dashed 

@extend vs. Mixins @extend modifies selectors, mixins add properties & values .alert border: 1px #f00 background-color: #eee .criticalAlert @extend .alert border-width: 3px color: #8a0808 Sass Input (@extend) .alert, .criticalAlert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 CSS Output 

@extend vs. Mixins @extend modifies selectors, mixins add properties & values @mixin alert border: 1px #f00 background-color: #eee .criticalAlert @mixin alert border-width: 3px color: #8a0808 Sass Input (@mixin) .criticalAlert border: 1px #f00 background-color: #eee border-width: 3px color: #8a0808 CSS Output 

Placeholder selector %-prefixed selectors don’t get rendered to CSS %alert border: 1px #f00 background-color: #eee .criticalAlert @extend %alert border-width: 3px color: #8a0808 Sass Input .criticalAlert border: 1px #f00 background-color: #eee .criticalAlert border-width: 3px color: #8a0808 CSS Output 

The Good Stuff ✦ Variables ✦ Mixins ✦ Selector Inheritance “@extend” ✦ Other goodies 

Parent Selector a font-weight: bold text-decoration: none a:hover text-decoration: underline 

Parent Selector a font-weight: bold text-decoration: none a:hover text-decoration: underline a font-weight: bold text-decoration: none &:hover text-decoration: underline 

@import & Partials @import "rounded-corners", "text-shadow" filenames that start with an underscore won’t be compiled into the output directory _rounded-corners.sass _text-shadow.sass 

Installing and Using Sass 

Installing and Using Sass Command Line 

Installing and Using Sass Command Line GUI Apps 

Installing and Using Sass Command Line GUI Apps Other frameworks, templates, and project generators 

Command Line ✦ Requires Ruby ✦ Best to use a new(ish) version of Ruby (1.9.3 or higher) ✦ Probably a good idea to use a Ruby version manager (RVM, rbenv, etc.) 

Installing Sass gem install sass 

Using Sass sass input.sass output.css 

Using Sass sass input.sass output.css sass --watch input.sass:output.css 

Using Sass sass input.sass output.css sass --watch input.sass:output.css sass --watch app/sass:public/stylesheets 

GUI Apps ✦ CodeKit Mac http://incident57.com/codekit/ ✦ Scout Mac & Windows http://mhs.github.io/scout-app/ ✦ Compass.app Mac, Windows, and Linux http://compass.handlino.com ✦ Others 

Other frameworks, templates, and project generators ✦ Yeoman http://yeoman.io ✦ Middleman http://middlemanapp.com 

Also built into… codepen.io 

More Awesome Stuff 

http://compass-style.org 

http://susy.oddbird.net 

Around the Interwebs Demo time! 

Q&A 

Convinced? 

@nathos [email protected]