Getting Sassy
with CSS
Julie Cameron
@jewlofthelotus
#SassyCSS
bit.ly/getting-sassy
DERP.
I <3 PAIR PROGRAMMING
Syntactically Awesome Stylesheets
NOT an
acronym…
Syntactically Awesome Stylesheets
NOT
SASS
dot com
“If you see something, say something.
Only you can prevent overcapitalization.”
Hampton Catlin, Creator Of Sass
Just don’t be a
#Sasshole
about it. :)
Welcome to the
Sass
community!!
What Is Sass?
1. An extension of CSS
SassScript Language. Fully CSS-compatible syntax.
What Is Sass?
1. An extension of CSS
SassScript Language. Fully CSS-compatible syntax.
2. A CSS preprocessor
SassScript MA...
Where Did Sass Come From?
• 2007: Designed by
Hampton Catlin (Haml)
• Developed by Chris
Eppstein (Compass) and
Natalie We...
Why Did They Make Sass?
Because vanilla CSS just
wasn’t cutting it any more.
Bert Bos, CSS Co-Inventor
CSS stops short of even more powerful
features […]. That is because these things
give power-user...
What Does Sass Give
Us That CSS Doesn’t?
• Nesting
• Imports
• Variables
• Mixins
• Inheritance
• Functions
• Loops
• AWES...
What Does Sass Give
Us That CSS Doesn’t?
• Reduced Repetition
• Cleaner Modularity
• Maintainability
• Scalability
• REAL ...
Setup & Workflow
Sass Installation
Ruby
OS X? Lucky you, it’s preinstalled!
Windows? Try RubyInstaller.
Sass
$ gem install sass
Sass Installation
LibSass (C/C++)
sass-lang.com/libsass
Compiling Sass
Sass CSS
$ sass source.sass output.css
$ sass source_dir output_dir
MAGIC
Sass Is Watching You
$ sass —-watch source.sass:output.css
This is the best thing. Ever.
Gotchya: Colon vs. Space
Two Sass Syntaxes
Sassy CSS .scss
Default; Valid CSS == Valid SCSS
Indented .sass
Original syntax; Haml-esque
The Good Stuff
Or, Why You’ll Never Write Plain Old CSS Again.
NESTING
Nesting
HTML has a clear hierarchy - elements are nested.
We can apply the same concept in Sass.
HTML Sass
Nesting Output
MAGIC
Sass CSS
Nesting Gotchya
Mirroring HTML nesting is
SUPER easy.
MAGIC?
Overly verbose and overly specific.
General Rule:
No more than...
Nesting The Parent Selector
You can reference parent selector(s) with an &
MAGIC
Sass CSS
Nesting The Parent Selector
The & can follow other selectors, too!
MAGIC
Sass
CSS
Sass
Nesting The Parent Selector
You can also append a suffix to the &!
MAGIC
CSS
Nesting Media Queries
MAGIC
THIS IS FREAKING AWESOME.
Sass CSS
Note: Matching media queries will
not group together in the...
IMPORTS
AND ORGANIZATION
Imports
CSS @import has always
meant an extra file download.
Sass (application.scss)
Sass modifies @import to
instead includ...
Imports File Structure
• project_awesome
• sass
• lib
• fontawesome.scss
• base.scss
• grid.scss
• application.scss
• css
...
Imports File Structure
• project_awesome
• sass
• lib
• fontawesome.scss
• base.scss
• grid.scss
• application.scss
• css
...
Imports File Structure
• project_awesome
• sass
• lib
• fontawesome.scss
• base.scss
• grid.scss
• application.scss
• css
...
Imports File Structure
• project_awesome
• sass
• lib
• fontawesome.scss
• base.scss
• grid.scss
• application.scss
$ sass...
Imports File Structure
• project_awesome
• sass
• lib
• fontawesome.scss
• base.scss
• grid.scss
• application.scss
$ sass...
Import Partials
• project_awesome
• sass
• lib
• _fontawesome.scss
• _base.scss
• _grid.scss
• application.scss
• print.cs...
Import Partials
• project_awesome
• sass
• lib
• _fontawesome.scss
• _base.scss
• _grid.scss
• application.scss
• print.cs...
VARIABLES
Variables
WTF is
#531946?
#30162b?
#095179?
WAT?
Variables
Variables let you
reuse single values.
Sass
Variable Uses
colors
font sizes
font families
font paths
padding
margins
breakpoints
border-radius
pseudo content
shadows
...
Variable Data Types
Numbers
Strings
Colors
Lists
Booleans
Null
Maps
Sass
Variable Dynamics
• Mutable.
• Can be
interpolated.
• Have scopes.
Sass
MATH+
COLOR
Math
• + addition
• - subtraction
• * multiplication
• / division
• % modulus
Sass gives us basic math operations.
Sass
Sa...
Math Functions
• abs($num) - absolute value
• ceil($num) - round up to closest whole number
• floor($num) - round down to ...
Color Math
We can even use math to manipulate colors.
Sass
Color Functions
• rgba($hex, $alpha)
• lighten($color, $percent)
• darken($color, $percent)
• saturate($color, $percent)
•...
MIXINS
Mixins
Variables let you reuse single values
Mixins let you reuse blocks of styles
Mixins Use
CSS Sass
Mixins output their contents where they are called.
Mixin Output
Mixin Features
• argument defaults
• multiple arguments
• optional arguments
M
AGIC
CSS
Sass
Mixin Alternative?
Grouped OutputCSS
@EXTEND
INHERITANCE
@extend
Lets you group selectors
and styles together
MAGIC
Sass
CSS
Placeholders
Placeholders can be @extended but will
never compile to the CSS on their own
MAGIC
Sass
CSS
Plus Lots More WIN
Functions
Conditions
extra-light
Each Loops
For Loops
While Loops
Maps
Key-value pairs.
• Multiple assignment in loops.
• Lots of helper methods.
Demo Time
https://github.com/roytomeij/sassconf
Resources
Sass-Lang.com
The Sass Way
Sass For Web Designers
Assembling Sass
SassNews Newsletter
SassConf
SassConf 2013 Vid...
Closing Tips
• Take it one step at a time.
• Keep an eye on your output.
• Don’t nest too deeply.
• Mind your @mixins and ...
<3
Thank You!
Getting Sassy
with CSS
#SassyCSS
bit.ly/getting-sassy
Questions?
Getting Sassy with CSS
Getting Sassy with CSS
Getting Sassy with CSS
Upcoming SlideShare
Loading in …5
×

Getting Sassy with CSS

3,565 views

Published on

I don't know about you, but vanilla CSS always leaves me wanting more. It's a fairly simple language, can do some pretty powerful things, but after a while.. well, it can become rather tedious to work with. Enter Sass: Syntactically Awesome Stylesheets. Sass is a CSS meta-language and precompiler that makes the prettification of your website a breeze by adding invaluable features of more traditional programming languages. In this session, we'll jump right in to the Sass workflow and cover all the key game changers - nesting, variables, mixins, inheritance, and directives. We'll also cover some of the gotchyas, tools and extensions, and tips for organization and coding standards.

Prepared for self.conference at COBO Hall in Detroit, Michigan on May 30, 2014.
Updated for CodeMash January 2015.
Updated for Detroit Craftsman Guild March 2016.

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,565
On SlideShare
0
From Embeds
0
Number of Embeds
420
Actions
Shares
0
Downloads
38
Comments
0
Likes
9
Embeds 0
No embeds

No notes for slide

Getting Sassy with CSS

  1. 1. Getting Sassy with CSS Julie Cameron @jewlofthelotus #SassyCSS bit.ly/getting-sassy
  2. 2. DERP.
  3. 3. I <3 PAIR PROGRAMMING
  4. 4. Syntactically Awesome Stylesheets
  5. 5. NOT an acronym… Syntactically Awesome Stylesheets
  6. 6. NOT SASS dot com
  7. 7. “If you see something, say something. Only you can prevent overcapitalization.” Hampton Catlin, Creator Of Sass
  8. 8. Just don’t be a #Sasshole about it. :)
  9. 9. Welcome to the Sass community!!
  10. 10. What Is Sass? 1. An extension of CSS SassScript Language. Fully CSS-compatible syntax.
  11. 11. What Is Sass? 1. An extension of CSS SassScript Language. Fully CSS-compatible syntax. 2. A CSS preprocessor SassScript MAGIC CSS
  12. 12. Where Did Sass Come From? • 2007: Designed by Hampton Catlin (Haml) • Developed by Chris Eppstein (Compass) and Natalie Weizenbaum
  13. 13. Why Did They Make Sass? Because vanilla CSS just wasn’t cutting it any more.
  14. 14. Bert Bos, CSS Co-Inventor CSS stops short of even more powerful features […]. That is because these things give power-users a lot of rope, but less experienced users will unwittingly hang themselves; or, more likely, be so scared that they won’t even touch CSS. “
  15. 15. What Does Sass Give Us That CSS Doesn’t? • Nesting • Imports • Variables • Mixins • Inheritance • Functions • Loops • AWESOME
  16. 16. What Does Sass Give Us That CSS Doesn’t? • Reduced Repetition • Cleaner Modularity • Maintainability • Scalability • REAL PROGRAMMING!
  17. 17. Setup & Workflow
  18. 18. Sass Installation Ruby OS X? Lucky you, it’s preinstalled! Windows? Try RubyInstaller. Sass $ gem install sass
  19. 19. Sass Installation LibSass (C/C++) sass-lang.com/libsass
  20. 20. Compiling Sass Sass CSS $ sass source.sass output.css $ sass source_dir output_dir MAGIC
  21. 21. Sass Is Watching You $ sass —-watch source.sass:output.css This is the best thing. Ever. Gotchya: Colon vs. Space
  22. 22. Two Sass Syntaxes Sassy CSS .scss Default; Valid CSS == Valid SCSS Indented .sass Original syntax; Haml-esque
  23. 23. The Good Stuff Or, Why You’ll Never Write Plain Old CSS Again.
  24. 24. NESTING
  25. 25. Nesting HTML has a clear hierarchy - elements are nested. We can apply the same concept in Sass. HTML Sass
  26. 26. Nesting Output MAGIC Sass CSS
  27. 27. Nesting Gotchya Mirroring HTML nesting is SUPER easy. MAGIC? Overly verbose and overly specific. General Rule: No more than 2-3 levels deep Sass CSS
  28. 28. Nesting The Parent Selector You can reference parent selector(s) with an & MAGIC Sass CSS
  29. 29. Nesting The Parent Selector The & can follow other selectors, too! MAGIC Sass CSS
  30. 30. Sass Nesting The Parent Selector You can also append a suffix to the &! MAGIC CSS
  31. 31. Nesting Media Queries MAGIC THIS IS FREAKING AWESOME. Sass CSS Note: Matching media queries will not group together in the output.
  32. 32. IMPORTS AND ORGANIZATION
  33. 33. Imports CSS @import has always meant an extra file download. Sass (application.scss) Sass modifies @import to instead include the resource during compilation, rather than on the client side.
  34. 34. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css Sass
  35. 35. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css $ sass sass/application.scss css/application.css Sass
  36. 36. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css $ sass sass/application.scss css/application.css Sass • application.css
  37. 37. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss $ sass sass/ css/
  38. 38. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss $ sass sass/ css/ • project_awesome • css • lib • fontawesome.css • base.css • grid.css • application.css MAGIC
  39. 39. Import Partials • project_awesome • sass • lib • _fontawesome.scss • _base.scss • _grid.scss • application.scss • print.css $ sass sass/ css/
  40. 40. Import Partials • project_awesome • sass • lib • _fontawesome.scss • _base.scss • _grid.scss • application.scss • print.css $ sass sass/ css/ MAGIC • project_awesome • sass • … • css • application.css • print.css
  41. 41. VARIABLES
  42. 42. Variables WTF is #531946? #30162b? #095179? WAT?
  43. 43. Variables Variables let you reuse single values. Sass
  44. 44. Variable Uses colors font sizes font families font paths padding margins breakpoints border-radius pseudo content shadows gradients SELECTORS! LOGIC! ALL THE THINGS!!!1!
  45. 45. Variable Data Types Numbers Strings Colors Lists Booleans Null Maps Sass
  46. 46. Variable Dynamics • Mutable. • Can be interpolated. • Have scopes. Sass
  47. 47. MATH+ COLOR
  48. 48. Math • + addition • - subtraction • * multiplication • / division • % modulus Sass gives us basic math operations. Sass SassyCSS
  49. 49. Math Functions • abs($num) - absolute value • ceil($num) - round up to closest whole number • floor($num) - round down to closest whole number • percentage($num) - convert to percentage • round($num) - round to closest whole number • max($list) - maximum list value • min($list) - minimum list value Sass comes with a set of math functions.
  50. 50. Color Math We can even use math to manipulate colors. Sass
  51. 51. Color Functions • rgba($hex, $alpha) • lighten($color, $percent) • darken($color, $percent) • saturate($color, $percent) • desaturate($color, $percent) • mix($color1, $color2) • grayscale($color) • invert($color) • complement($color) • AND MANY MORE! Sass comes with AWESOME color functions. http://sassme.arc90.com
  52. 52. MIXINS
  53. 53. Mixins Variables let you reuse single values Mixins let you reuse blocks of styles
  54. 54. Mixins Use CSS Sass Mixins output their contents where they are called.
  55. 55. Mixin Output Mixin Features • argument defaults • multiple arguments • optional arguments M AGIC CSS Sass
  56. 56. Mixin Alternative? Grouped OutputCSS
  57. 57. @EXTEND INHERITANCE
  58. 58. @extend Lets you group selectors and styles together MAGIC Sass CSS
  59. 59. Placeholders Placeholders can be @extended but will never compile to the CSS on their own MAGIC Sass CSS
  60. 60. Plus Lots More WIN
  61. 61. Functions
  62. 62. Conditions extra-light
  63. 63. Each Loops
  64. 64. For Loops
  65. 65. While Loops
  66. 66. Maps Key-value pairs. • Multiple assignment in loops. • Lots of helper methods.
  67. 67. Demo Time https://github.com/roytomeij/sassconf
  68. 68. Resources Sass-Lang.com The Sass Way Sass For Web Designers Assembling Sass SassNews Newsletter SassConf SassConf 2013 Videos SassMeister Sass Style Guide #teamSass
  69. 69. Closing Tips • Take it one step at a time. • Keep an eye on your output. • Don’t nest too deeply. • Mind your @mixins and @media queries. • Careful with your @extends. • Modularize all the things.
  70. 70. <3
  71. 71. Thank You! Getting Sassy with CSS #SassyCSS bit.ly/getting-sassy Questions?

×