CSS is for Clark Kent. Sass is for Superman. About John Albin - PowerPoint PPT Presentation

http://bit.ly/sass-for-superman FRONTEND TRACK | JOHN ALBIN WILKINS | FEBRUARY 7 2013 CSS is for Clark Kent. Sass is for Superman.

About John Albin Wilkins JohnAlbin drupal.org/user/11297 @JohnAlbin 2

O’Reilly book: Sass and Compass – Will be published in the spring of 2013. – Will be awesome. – May contain Lemurs. 3

The CMS 1993 2013 4

We had mobile devices in 1993! 5

Efficiency in CSS 7

Efficiency in CSS 7

Obviously, we have a problem. 8

We’re screwed. • Responsive • HTML5 • Lazy loading • Accessibility • Front-end Web Design • SMACSS • Aria performance • CSS3 • Microformats • Aggregation • Flexbox • Sprites strategies • Vendor Prefixes • Data URIs • Yeoman • Transitions • jQuery • Compass • OCSS • Media queries • Normalize.css • BEM • YepNope • Mobile first • Sass • Mobile • Canvas • Less • Testing • AMD • Bower • Require.js • Drupal theming 9

Nicolas Gallagher “ Are you new to front-end web development? Here’s a secret: no one else really knows what they’re doing either.” — @necolas 10

Clark Kent was decent at his job. 11

Clark Kent was decent at his job. …but Lois Lane kicked his ass. 11

2 years ago, at…

ZERO COMMITMENT!!!! Sass = CSS + extras Sass compiles to normal CSS Automatic compilation 13

http://bit.ly/sass-for-superman Installing Sass & Compass • Command line — FREE (I use this.) http://thesassway.com/beginner/getting-started-with-sass-and-compass sudo gem install compass • Compass.app — $10 http://compass.handlino.com • Fire.app — $14 (I use this too.) http://fireapp.handlino.com • CodeKit — $25 http://incident57.com/codekit/ 14

sass --watch $> sass --watch sass:css [sass dir]:[css dir] >>> Sass is watching for changes. Press Ctrl-C to stop. 15

sass --watch $> sass --watch sass:css [sass dir]:[css dir] >>> Sass is watching for changes. Press Ctrl-C to stop. SASQUATCH! 15

http://bit.ly/superman-1 Variables and color functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html 16

http://bit.ly/superman-1 Variables and color functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html 16

http://bit.ly/superman-1 Variables and color functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html 16

http://bit.ly/superman-1 Variables and color functions http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html 16

http://bit.ly/superman-2 Nesting (rulesets and properties) http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules 17

http://bit.ly/superman-2 Nesting (rulesets and properties) http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules 17

http://bit.ly/superman-3 Comments and output style http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style 18

http://bit.ly/superman-3 Comments and output style http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style 18

http://bit.ly/superman-3 Comments and output style http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style 18

http://bit.ly/superman-3 Comments and output style http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#output_style 18

http://bit.ly/superman-4 Parent selectors http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_ 19

http://bit.ly/superman-4 Parent selectors http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#referencing_parent_selectors_ 19

@import 20

@import styles.scss : 20

@import styles.scss : normalize.scss : print.scss : 20

@import styles.scss : styles.css : 20

Partials 21

Partials styles.scss : 21

_init.scss • Declare all your variables • Import all your modules (Compass, Zen Grids, etc.) 22

_init.scss • Declare all your variables • Import all your modules (Compass, Zen Grids, etc.) File organization 22

Drupal integration my-theme.info : stylesheets[all][] = css/styles.css 23

There’s a module for that™ * “that” refers to $@#$ing up your CSS. PHP version of Sass = Buggy version of Sass 24

Feeling the speed yet? 25

http://bit.ly/superman-5 Extends & placeholder selectors http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend 26

http://bit.ly/superman-5 Extends & placeholder selectors http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#placeholder_selectors_ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend 26

http://bit.ly/superman-6 Mixins http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins 27

http://bit.ly/superman-6 Mixins http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins 27

Compass!!!!! 28

Data URIs (with @import “compass”; ) 29

Data URIs (with @import “compass”; ) 29

Data URIs (with @import “compass”; ) 29

http://bit.ly/superman-7 CSS3 & Vendor prefixes http://compass-style.org/reference/compass/css3/border_radius/ 30

http://bit.ly/superman-7 CSS3 & Vendor prefixes http://compass-style.org/reference/compass/css3/border_radius/ 30

http://bit.ly/superman-7 CSS3 & Vendor prefixes http://compass-style.org/reference/compass/css3/border_radius/ 30

Zen Grids Homepage: http://zengrids.com Webinar: https://www.acquia.com/resources/acquia-tv/ conference/creating-responsive-drupal-sites-zen-grids-and- zen-5-theme-july-19 31

32

BOF! ALL THINGS SASS & COMPASS Tomorrow morning @ 10:45am! 33

What if we all shared? 34

What if we all shared? 34

Thank you!

What did you think? Session review: http://bit.ly/i-love-superman Stalk Follow me: @JohnAlbin