Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"

Brian Hoke: WordPress & Sass@bentleyhoke

Sass & WordPressBrian Hoke

Bentley Hoke Interactive | @bentleyhoke bentleyhoke.com

This Presentationhttp://bent.ly/ENLX

Aside: Presentation ThemeWordPress theme to generate this kind of presentationImplements reveal.jsDownload

What Sass?preprocessorlanguageextends CSS

Sass Code1234567891011121314151617

$base-color: #c00;$body-font-color: lighten( $base-color, 15%);$page-title-color: darken( $base-color, 20%);$body-font-size: '13px';

article { color: $body-font-color;

font: { size: $body-font-size; family: Helvetica, Arial, sans-serif;

}

h1 { color: $page-title-color;

}}

Compiled CSS Code12345678

article { color: #ff1a1a; font-size: "13px"; font-family: Helvetica, Arial, sans-serif;}article h1 { color: #660000;}

Really, what is it?Script that interprets SCSS into CSSSass is both the language and the script processFlavors –

old (indented)new (SCSS)

Output is perfectly valid CSS

example

Various WhoopsAs in “Big Whoops”:

CompressionVariablesNestingFile organization (partials & import)Code reuse (mixins & inheritance)Built-in functions & operators

Install SassAppsCommand linehttp://sass-lang.com/install

Command Line Installation[Windows] Install Ruby

Windows: gem install sass[Mac] sudo gem install sasstest it: sass -v

Ruby Installer

How Sass?setup watch to generate CSS from changes to SCSScarelessly bang out some code thoughtfully plan out organization of code and filesupload generated CSS – just like it was written directly – to production site

Setting Your Watchsass --watch themes/reveal/sass:themes/reveal --style compressed

Variables & Functions12345678910111213141516

$bright-red: #f00;$medium-red: #c00;$half-opaque-white: rgba(255,255,255,0.7); $default-link-color: opacify($medium-red, 0.6);$page-title-color: darken($medium-red, 10%);$link-color: complement($medium-red); $rightleft-padding: 2.5%;$tall-topbottom-padding: 1%;$narrow-topbottom-padding: 0.5%; $site-width: 90%;$main-content-width: 68%; $sidebar-width: 99% - $main-content-width - (4 * $rightleft-padding);

Code Organization1234567891011

@import 'reset';@import 'assistive';@import 'variables';@import 'bxslider';@import 'mainnav';@import 'interior';@import 'full_flight_info';@import 'sidebar';@import 'structure';@import 'slicknav';@import 'responsive';

MixinsSass (from library)Bourbon

1234

@import 'bourbon/bourbon';section { @include linear-gradient(to top, red, orange);}

Resulting CSS12345

section { background-color: red; background-image: -webkit-linear-gradient(bottom, red, orange); background-image: linear-gradient(to top, red, orange);}

Why Sass?Code organization: easier to maintain, teamPerformance: loads fasterTools: write better, faster, stronger codeSharing: get code from, give code to others

Code Organizationeasier to teameasier to maintaineasier to give and receiveexample: ABQ airport sites

Performance

stitch together multiple CSS files – avoid limit on number of concurrent connectionscompression

Powerinheritance and mixins offer DRY ease-of-change: great power and great responsibilitybuilt-in functionsa !for loop

Sharinghanding off, receiving codeswitchboarding of settingsexample: Foundation

More Info & Questionshttp://sass-lang.com/