Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Sass for noobs

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.

Dale Sande

March 26, 2012
Tweet

More Decks by Dale Sande

Other Decks in Programming

Transcript

  1. 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
  2. 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.
  3. 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
  4. GUI APPS http://compass.handlino.com/ • Works in mac, linux and pc

    • Built-in Web server • LiveReload support • Compass extensions support $10 donation ware
  5. GUI APPS http://mhs.github.com/scout-app/ • Works in mac and pc •

    Built-in Web server • Compass support free
  6. GUI APPS http://incident57.com/codekit/ “CodeKit automatically compiles Less, Sass, Stylus, CoffeeScript,

    Jade & Haml files. It effortlessly combines, minifies and error- checks Javascript. ...”
  7. 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
  8. 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
  9. 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
  10. 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.
  11. SCOUT Create project file Create Sass directory Create Style directory

    Open Scout Click [+] to add new project Select Sass directory Select Style directory
  12. 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.
  13. WHAT ABOUT COMPASS? "Where Sass left off, Compass goes to

    the next level." — Nathan Smith in Sass for Designers
  14. 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.
  15. 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
  16. 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.
  17. 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
  18. 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
  19. 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.
  20. 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
  21. 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.
  22. 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
  23. 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.
  24. 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
  25. 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.
  26. 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
  27. 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.
  28. 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
  29. 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.
  30. 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
  31. @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 ;(
  32. @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
  33. @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.
  34. BUY THE BOOKS ‘sass40’ 40% off early access book http://www.manning.com/

    netherland/ http://pragprog.com/book/ pg_sass/pragmatic-guide-to-sass
  35. RATE THE SPEAKER You don’t win anything, but it helps

    me to get better at this ;) http://speakerrate.com/speakers/15438