Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

October 2014 - USG Rock Eagle - Sass 101

681 views

Published on

An introduction to Sass.

Published in: Education
  • Be the first to comment

  • Be the first to like this

October 2014 - USG Rock Eagle - Sass 101

  1. 1. ` 1 PLAYER GAME MARIO 0000000 WORLD 1-1 TIME ROCK_EAGLE Simplifying and extending CSS for the 21st century! 2 PLAYER GAME
  2. 2. Introductions and Shout Outs World -1-1 Section Text Body Level One MARIO 0000000 WORLD -1-1 TIME ROCK_EAGLE x 3
  3. 3. Eric Sembrat • Web Manager - College of Engineering, Georgia Tech • Ph.D. Student - Instructional Technology, Georgia State ! ! • Website: http://ericsembrat.com • Twitter: @esembrat
  4. 4. World Map • The State of CSS • Enter: CSS Preprocessors • How Sass Works • Sass Features • Q&A / Discussion
  5. 5. And now, for some plugs..
  6. 6. USGWeb Collaboration Group • Communication list for web development discussion between the 31 institutions in the University System of Georgia. ! • http://usgweb.gatech.edu
  7. 7. http://atlanta.buildguild.org/
  8. 8. The State of CSS World 1-1 Section Text Body Level One MARIO 0000000 WORLD 1-1 TIME ROCK_EAGLE x 3
  9. 9. We’ve come a long way…
  10. 10. We’ve come a long way…
  11. 11. CSS Growing Up • Before CSS, there were inline element styles. <font color=“green” size=“8” family=“Wingdings”>
  12. 12. CSS Growing Up • Before CSS, there were inline element styles. ! • Then CSS was born with style. <font color=“green” size=“8” family=“Wingdings”> <font style=“color: green; font-size: 8pt; font-family: Wingdings”>
  13. 13. CSS Growing Up • Before CSS, there were inline element styles. ! • Then CSS was born with style. ! • Finally, CSS grew too big to live with HTML. <font color=“green” size=“8” family=“Wingdings”> <font style=“color: green; font-size: 8pt; font-family: Wingdings”> @import url(fancy-pants-css.css);
  14. 14. CSS Has Not Aged Well.. Variables CSS3 Inheritance Reusability CSS Organization Media Queries Theme Templates
  15. 15. Some of this will change.. • CSS4 looks to fix some of these issues (1) • Parent Selectors • Grids • However, there’s still one big elephant in the room.
  16. 16. Don’t Repeat Yourself
  17. 17. What is DRY? • Minimizing repetition of the information in a project • Modifications only happen in one place ! • Construction of repetitive, reusable, and scalable elements
  18. 18. DRY in CSS • CSS does not have DRY capabilities built-in: • Variables (i.e. color, font) • Media queries • Chunks of CSS • So, how do we fix CSS and get out of this mess?
  19. 19. Sass to the Rescue! http://sass-lang.com/
  20. 20. What is Sass? World 2-1 Section Text Body Level One MARIO 0000000 WORLD 2-1 TIME ROCK_EAGLE x 3
  21. 21. Preprocessor • Sass is a preprocessor for CSS • Converts Sass short-code into clunky, ugly CSS • Serves as a translator CSS compiles to SASS
  22. 22. Sass • Sass uses a very CSS-like syntax (.SCSS) to extend new features into the syntax you already know ! • An alternative is a tab-centric syntax (.SASS)
  23. 23. Compare #main { color: blue; font-size: 0.3em; • Our CSS-friendly .SCSS formatting option. http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better } #main! color: blue font-size: 0.3em • Or, the tab-centric .SASS formatting option.
  24. 24. .SCSS vs. .SASS • Changing syntax is an automated process: • http://sass-lang.com/documentation/ file.SASS_REFERENCE.html#syntax
  25. 25. What does Ruby run on? • Sass was originally developed as in the Ruby programming language. • Sass was recently ported over to C/C++ as LibSass.
  26. 26. Using Sass World 3-1 Section Text Body Level One MARIO 0000000 WORLD 3-1 TIME ROCK_EAGLE x 3
  27. 27. Web Console • SassMeister • http://sassmeister.com/
  28. 28. 1) Get a App • Easiest way to get started is to download a Sass application. • http://sass-lang.com/install • Multi-platform releases • Free and paid products available
  29. 29. Scout Scout - http://mhs.github.io/scout-app/
  30. 30. CodeKit CodeKit - https://incident57.com/codekit/
  31. 31. Sass Features World 4-1 Section Text Body Level One MARIO 0000000 WORLD 4-1 TIME ROCK_EAGLE x 3
  32. 32. 2) Learn the Syntax • Learn many of the essential features of Sass. • Variables • Nesting • Mixins • Plugins • Partials • (and more!)
  33. 33. Variables $pretty-blue: #0000FF; $pretty-font-size: 0.3em; ! #main { color: $pretty-blue; font-size: $pretty-font-size; } #main { color: #0000FF; font-size: 0.3em; }
  34. 34. Nesting $pretty-blue: #0000FF; ! #main { color: $pretty-blue; font-size: 0.3em; #slideshow { background-color: mix(#FFF, $pretty-blue, 20%); } } #main { color: #0000FF; font-size: 0.3em; } ! #main #slideshow { background-color: #3333ff; }
  35. 35. Mixins @mixin chattanooga() { background-color: pink; font-size: 25pt; } ! #body #chattanooga { @include chattanooga(); } #body #chattanooga { background-color: pink; font-size: 25pt; }
  36. 36. Mixins @mixin chattanooga() { background-color: pink; font-size: 25pt; Mixins can reference mixins! } ! #body #chattanooga { @include chattanooga(); } #body #chattanooga { background-color: pink; font-size: 25pt; }
  37. 37. Mixins @mixin chattanooga() { background-color: pink; font-size: 25pt; Mixins can take arguments (with } ! #body #chattanooga { default values)! @include chattanooga(); } #body #chattanooga { background-color: pink; font-size: 25pt; }
  38. 38. Plugins • Compass • http://compass-style.org/ • Sass Globbing • https://github.com/chriseppstein/sass-globbing • Breakpoint • http://breakpoint-sass.com/ • Bourbon • http://bourbon.io/
  39. 39. Partials compiles global.scss global.css to _hdr.scss _ftr.scss
  40. 40. Configure CSS Output • Sass uses a configuration file (config.rb) to control CSS output • Requires Compass • http://compass-style.org/help/documentation/configuration-reference/
  41. 41. Advanced Features World 5-1 Section Text Body Level One MARIO 0000000 WORLD 5-1 TIME ROCK_EAGLE x 3
  42. 42. Block Element Modifier (BEM) • Methodology for naming classes. .BLOCK{__ELEMENT[--MODIFIER]}
  43. 43. Block Element Modifier (BEM) • Methodology for naming classes. .BLOCK{__ELEMENT[--MODIFIER]} .COLOR__PRIMARY .COLOR__PRIMARY--LIGHT .COLOR__PRIMARY--DARK
  44. 44. Block Element Modifier (BEM) • Can be programmatically built into Sass.
  45. 45. Block Element Modifier (BEM) • Can be programmatically built into Sass.
  46. 46. Source Maps • Source maps allow you to see the original source (Sass) instead of the compiled CSS while debugging.
  47. 47. Source Maps • Requires enabling source-maps on Sass and in the desired browser (Chrome & Firefox, Safari). http://thesassway.com/intermediate/using-source-maps-with-sass
  48. 48. • Associations of “key” | “value” objects. ! ! ! ! • Similar to programming arrays. • map-merge() • map-get() • map-remove() Maps $map: (key1: value1, key2: value2, key3: value3);
  49. 49. Demo? World 6-1 Section Text Body Level One MARIO 0000000 WORLD 6-1 TIME ROCK_EAGLE x 3
  50. 50. Demo Quick highlights and features!
  51. 51. Let’s Chat Questions, Comments, Concerns, Discussions about Sass

×