Sass for noobs

DECK HAS BEEN UPDATED!!!!
https://speakerdeck.com/anotheruiguy/sass-101-a-newbs-guide

The Seattle SASS Meetup is hosting 'Noob Nite.' Have you looked at SASS and thought, 'man, too much to byte off?' Well, lets get past those barriers, get SASS installed on your laptop and start writing some code.

CSS processors are taking the industry by storm. Lets face it, CSS is dated and limited. It is time to breathe new life into an old language. Variables, mixins, functions, all things most never imagined doing with CSS, we can do with SASS.

Transcript

1. SASS FOR NOOBS Let’s talk about Sass
2. A BRIEF HISTORY OF SASS • June 30th 2006 'Hampton Catlin' 1st commit for HAML on Github • Dec 3rd 2006 'Nathan Weizenbaum' began to commit to Sass • Aug 23, 2008 'Chris Eppstein' 1st Compass commit on Github • Aug 31, 2011 Rails 3.1 comes configured with Sass
3. SASS IS NOT EXCLUSIVE TO RAILS!
4. INSTALLING SASS Starting with the Command Line versions
5. COMMAND LINE $ gem install sass Sass is dependent on Ruby. If you are on a Mac, Ruby is already installed. For Unix or Windows users, installing Ruby is a prerequisite.
6. COMMAND LINE $ gem install sass $ gem install compass If you want to use Compass, like Sass, Compass is dependent on Ruby. Although the installer states that installing Compass includes Sass, I like to just make sure :D
7. INSTALLING SASS The GUI
8. GUI APPS http://compass.handlino.com/ • Works in mac, linux and pc • Built-in Web server • LiveReload support • Compass extensions support $10 donation ware
9. GUI APPS http://mhs.github.com/scout-app/ • Works in mac and pc • Built-in Web server • Compass support free
10. GUI APPS http://incident57.com/codekit/ “CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript, Jade & Haml files. It effortlessly combines, minifies and error- checks Javascript. ...”
11. GUI APPS http://livereload.com/ LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed. LiveReload
12. CODE HINTING, COLOR CODE
13. EDITOR SUPPORT Various text editors have various levels of support for Sass. Here’s a list of all of them that I know of. http://sass-lang.com/editors.html
14. IT’S TIME FOR YOUR FIRST PROCESSED STYLESHEET
15. SASS We’ll start out making a very simple directory structure. Inside the ‘sass’ directory, let’s crate ‘core.scss’ Last we will point the sass --watch command at these directories. $ sass --watch sass:style
16. SCOUT Scout requires the manual folder set up like using Sass, but has a simple UI for choosing the folder to watch and the folder to process to.
17. SCOUT Create project file Create Sass directory Create Style directory Open Scout Click [+] to add new project Select Sass directory Select Style directory
18. LIVE RELOAD LiveReload requires the manual folder set up like using Sass, but has a simple UI for choosing the folder to watch and the folder to process to.
19. WHAT ABOUT COMPASS? "Where Sass left off, Compass goes to the next level." — Nathan Smith in Sass for Designers
20. COMPASS $ cd [dir_loc] $ compass create my_project $ cd my_project $ compass watch
21. COMPASS.APP Compass.app is a GUI app that comes with Ruby, Sass and Compass installed. Creating a new project is the same as using the command line with Compass itself.
22. COMPASS.APP Launch app create > compass > project Choose location for new project folder
23. LET’S TALK ABOUT SASS
24. SASS & SCSS • Sass is the language and the original syntax • The Sass syntax uses indentation (white space) to indicate nesting of selectors and new lines • SCSS is an extension of the standard CSS syntax • Simply update .css to .scss and you are running! • SCSS is a syntax of the Sass language • SCSS uses brackets and semicolons to separate properties and new lines
25. NESTING .your_new_class { ! background: orange; ! p { ! ! font: { ! ! weight: bold; ! ! size: 14px; ! ! family: arial; ! ! } ! } } In SCSS each new open bracket declares a parent child relationship between selectors. As well, semicolons separate properties. But be mindful of the Inception Rule: don’t go more than four levels deep. Good CSS habits go far.
26. NESTING .your_new_class { ! background: orange; ! p { ! ! font: { ! ! weight: bold; ! ! size: 14px; ! ! family: arial; ! ! } ! } } .your_new_class { background: orange; } .your_new_class p { font-weight: bold; font-size: 14px; font-family: arial; } scss css
27. NESTING .your_new_class { background: orange; p { font: { weight: bold; size: 14px; family: arial; } } } Just to be clear ... this will work as well. It is the brackets and semicolons that delineate parent relationships and properties. This is how you can update a .CSS file to .SCSS and it works. But ... hard as hell to read. scss
28. PARENT REFERENCES a { ! color: red; ! text-decoration: none; ! &:hover { ! ! text-decoration: underline; ! } } What about pseudoclasses, like :hover? You just need to use the Sass special character ‘&’. In a selector, ‘&’ will be replaced verbatim with the parent selector.
29. PARENT REFERENCES a { ! color: red; ! text-decoration: none; ! &:hover { ! ! text-decoration: underline; ! } } a { color: red; text-decoration: none; } a:hover { text-decoration: underline; } scss css
30. PARENT REFERENCES button { ! background: grey; ! border: 1px solid black; ! border-radius: 5px; ! &.fail { ! ! color: red; ! ! border-color: red; ! } } The Sass special character ‘&’ is the gift that keeps giving. Let’s say that you need to chain two selectors together? Like button.fail, yup we can do that.
31. PARENT REFERENCES button { ! background: grey; ! border: 1px solid black; ! border-radius: 5px; ! &.fail { ! ! color: red; ! ! border-color: red; ! } } button { background: grey; border: 1px solid black; border-radius: 5px; } button.fail { color: red; border-color: red; } scss css
32. PARENT REFERENCES .box { ! box-sizing: border-box; ! width: 800px; ! padding: 30px; ! border: 1px solid black; ! .ie7 & { ! ! width: 738px; ! } } What about Modernizer support? What if you needed a fallback for CSS Gradients or want a different effect for text-shadows? Or what about supporting IE? No worries, Sass has you covered.
33. PARENT REFERENCES .box { ! box-sizing: border-box; ! width: 800px; ! padding: 30px; ! border: 1px solid black; ! .ie7 & { ! ! width: 738px; ! } } .box { box-sizing: border-box; width: 800px; padding: 30px; border: 1px solid black; } .ie7 .box { width: 738px; } scss css
34. PARENT REFERENCES .box { ! width: 800px; ! @media screen and (-webkit- device-pixel-ratio: 2) { ! ! width: 97%; ! } } Media queries got you down? What if you could define a selector and then apply the mobile version right there? Well, in Sass you can do just that.
35. PARENT REFERENCES .box { ! width: 800px; ! @media screen and (-webkit- device-pixel-ratio: 2) { ! ! width: 97%; ! } } .box { width: 800px; } @media screen and (-webkit-device-pixel-ratio: 2) { .box { width: 97%; } } scss css
36. VARIABLES $main-color: #ce4dd6; $style: solid; #navbar { border: { bottom: { color: $main-color; style: $style; } } } If you need to write it twice, then you are doing it wrong. As with other languages, and unlike CSS, Sass allows for variables.
37. VARIABLES $main-color: #ce4dd6; $style: solid; #navbar { border: { bottom: { color: $main-color; style: $style; } } } #navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; } scss css
38. MIXINS W/ARGUMENTS @mixin border_radius($radius: 5px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } .my_new_class { ! @include border_radius(3px 3px 0 0); } The real power of mixins comes when you pass them arguments. Arguments are declared as a parenthesized, comma-separated list of variables. Each of those variables is assigned a value each time the mixin is used.
39. MIXINS W/ARGUMENTS @mixin border_radius($radius: 5px) { border-radius: $radius; -moz-border-radius: $radius; -webkit-border-radius: $radius; } .my_new_class { ! @include border_radius(3px 3px 0 0); } .my_new_class { border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; -webkit-border-radius: 3px 3px 0 0; } scss css
40. @SILENT EXTENDZ %standard_box { ! background: orange; ! border: 1px solid black; } .site_header { ! @extend %standard_box; } The holy grail of CSS management. Example: https:// gist.github.com/ 2723354 BTW, @extends inside an @mixin == selector puking ;(
41. @SILENT EXTENDZ %standard_box { ! background: orange; ! border: 1px solid black; } .site_header { ! @extend %standard_box; } .site_header { background: orange; border: 1px solid black; } scss css
42. @IMPORT // Config file dependencies // ------------------------------- @import "config"; @import "button_config"; @import "design_config"; In CSS @import sucks. Each request is another http request and it is sloooooow. In Sass, @import pulls the code in at time of processing. Using partials helps to create Sass modules for efficient coding practices.
43. LET’S WRAP THIS UP!
44. BUY THE BOOKS ‘sass40’ 40% off early access book http://www.manning.com/ netherland/ http://pragprog.com/book/ pg_sass/pragmatic-guide-to-sass
45. THESASSWAY.COM
46. RATE THE SPEAKER You don’t win anything, but it helps me to get better at this ;) http://speakerrate.com/speakers/15438
47. DOWNLOAD THE DECK http://speakerdeck.com/u/anotheruiguy/p/sass-for-noobs
48. FOLLOW ME - DALESANDE.COM