Upload
bentleyhoke
View
69
Download
0
Embed Size (px)
DESCRIPTION
Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"
Citation preview
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/