October 2014 - USG Rock Eagle - Sass 101
0 likes826 views
The document discusses Sass, a CSS preprocessor. It introduces Sass and explains that it adds features like variables, nesting, mixins and more to make CSS more powerful and maintainable. The document then provides examples of how these Sass features work and are useful for minimizing repetition and improving reusability of CSS code.
![Block Element Modifier (BEM)
• Methodology for naming classes.
.BLOCK{__ELEMENT[--MODIFIER]}](https://image.slidesharecdn.com/2014-usgrockeagle-sass-141013122331-conversion-gate02/85/October-2014-USG-Rock-Eagle-Sass-101-42-320.jpg)
![Block Element Modifier (BEM)
• Methodology for naming classes.
.BLOCK{__ELEMENT[--MODIFIER]}
.COLOR__PRIMARY
.COLOR__PRIMARY--LIGHT
.COLOR__PRIMARY--DARK](https://image.slidesharecdn.com/2014-usgrockeagle-sass-141013122331-conversion-gate02/85/October-2014-USG-Rock-Eagle-Sass-101-43-320.jpg)
October 2014 - USG Rock Eagle - Sass 101
- 1. ` 1 PLAYER GAME MARIO 0000000 WORLD 1-1 TIME ROCK_EAGLE Simplifying and extending CSS for the 21st century! 2 PLAYER GAME
- 2. Introductions and Shout Outs World -1-1 Section Text Body Level One MARIO 0000000 WORLD -1-1 TIME ROCK_EAGLE x 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. World Map • The State of CSS • Enter: CSS Preprocessors • How Sass Works • Sass Features • Q&A / Discussion
- 5. And now, for some plugs..
- 6. USGWeb Collaboration Group • Communication list for web development discussion between the 31 institutions in the University System of Georgia. ! • http://usgweb.gatech.edu
- 8. The State of CSS World 1-1 Section Text Body Level One MARIO 0000000 WORLD 1-1 TIME ROCK_EAGLE x 3
- 9. We’ve come a long way…
- 10. We’ve come a long way…
- 11. CSS Growing Up • Before CSS, there were inline element styles. <font color=“green” size=“8” family=“Wingdings”>
- 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. 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. CSS Has Not Aged Well.. Variables CSS3 Inheritance Reusability CSS Organization Media Queries Theme Templates
- 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.
- 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. 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. Sass to the Rescue! http://sass-lang.com/
- 20. What is Sass? World 2-1 Section Text Body Level One MARIO 0000000 WORLD 2-1 TIME ROCK_EAGLE x 3
- 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. 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. 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. .SCSS vs. .SASS • Changing syntax is an automated process: • http://sass-lang.com/documentation/ file.SASS_REFERENCE.html#syntax
- 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. Using Sass World 3-1 Section Text Body Level One MARIO 0000000 WORLD 3-1 TIME ROCK_EAGLE x 3
- 27. Web Console • SassMeister • http://sassmeister.com/
- 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. Scout Scout - http://mhs.github.io/scout-app/
- 30. CodeKit CodeKit - https://incident57.com/codekit/
- 31. Sass Features World 4-1 Section Text Body Level One MARIO 0000000 WORLD 4-1 TIME ROCK_EAGLE x 3
- 32. 2) Learn the Syntax • Learn many of the essential features of Sass. • Variables • Nesting • Mixins • Plugins • Partials • (and more!)
- 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. 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. Mixins @mixin chattanooga() { background-color: pink; font-size: 25pt; } ! #body #chattanooga { @include chattanooga(); } #body #chattanooga { background-color: pink; font-size: 25pt; }
- 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. 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. Plugins • Compass • http://compass-style.org/ • Sass Globbing • https://github.com/chriseppstein/sass-globbing • Breakpoint • http://breakpoint-sass.com/ • Bourbon • http://bourbon.io/
- 39. Partials compiles global.scss global.css to _hdr.scss _ftr.scss
- 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. Advanced Features World 5-1 Section Text Body Level One MARIO 0000000 WORLD 5-1 TIME ROCK_EAGLE x 3
- 42. Block Element Modifier (BEM) • Methodology for naming classes. .BLOCK{__ELEMENT[--MODIFIER]}
- 43. Block Element Modifier (BEM) • Methodology for naming classes. .BLOCK{__ELEMENT[--MODIFIER]} .COLOR__PRIMARY .COLOR__PRIMARY--LIGHT .COLOR__PRIMARY--DARK
- 44. Block Element Modifier (BEM) • Can be programmatically built into Sass.
- 45. Block Element Modifier (BEM) • Can be programmatically built into Sass.
- 46. Source Maps • Source maps allow you to see the original source (Sass) instead of the compiled CSS while debugging.
- 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. • Associations of “key” | “value” objects. ! ! ! ! • Similar to programming arrays. • map-merge() • map-get() • map-remove() Maps $map: (key1: value1, key2: value2, key3: value3);
- 49. Demo? World 6-1 Section Text Body Level One MARIO 0000000 WORLD 6-1 TIME ROCK_EAGLE x 3
- 50. Demo Quick highlights and features!
- 51. Let’s Chat Questions, Comments, Concerns, Discussions about Sass