Getting Sassy with CSS
•
9 likes•4,296 views
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.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (9)
Similar to Getting Sassy with CSS
Similar to Getting Sassy with CSS (20)
More from Julie Cameron
Recently uploaded
Recently uploaded (20)
Getting Sassy with CSS
- 1. Getting Sassy with CSS Julie Cameron @jewlofthelotus #SassyCSS bit.ly/getting-sassy
- 2. DERP.
- 3. I <3 PAIR PROGRAMMING
- 7. NOT an acronym… Syntactically Awesome Stylesheets
- 9. “If you see something, say something. Only you can prevent overcapitalization.” Hampton Catlin, Creator Of Sass
- 10. Just don’t be a #Sasshole about it. :)
- 12. What Is Sass? 1. An extension of CSS SassScript Language. Fully CSS-compatible syntax.
- 13. What Is Sass? 1. An extension of CSS SassScript Language. Fully CSS-compatible syntax. 2. A CSS preprocessor SassScript MAGIC CSS
- 14. Where Did Sass Come From? • 2007: Designed by Hampton Catlin (Haml) • Developed by Chris Eppstein (Compass) and Natalie Weizenbaum
- 15. Why Did They Make Sass? Because vanilla CSS just wasn’t cutting it any more.
- 16. 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. “
- 17. What Does Sass Give Us That CSS Doesn’t? • Nesting • Imports • Variables • Mixins • Inheritance • Functions • Loops • AWESOME
- 18. What Does Sass Give Us That CSS Doesn’t? • Reduced Repetition • Cleaner Modularity • Maintainability • Scalability • REAL PROGRAMMING!
- 19. Setup & Workflow
- 20. Sass Installation Ruby OS X? Lucky you, it’s preinstalled! Windows? Try RubyInstaller. Sass $ gem install sass
- 22. Compiling Sass Sass CSS $ sass source.sass output.css $ sass source_dir output_dir MAGIC
- 23. Sass Is Watching You $ sass —-watch source.sass:output.css This is the best thing. Ever. Gotchya: Colon vs. Space
- 24. Two Sass Syntaxes Sassy CSS .scss Default; Valid CSS == Valid SCSS Indented .sass Original syntax; Haml-esque
- 25. The Good Stuff Or, Why You’ll Never Write Plain Old CSS Again.
- 26. NESTING
- 27. Nesting HTML has a clear hierarchy - elements are nested. We can apply the same concept in Sass. HTML Sass
- 29. 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
- 30. Nesting The Parent Selector You can reference parent selector(s) with an & MAGIC Sass CSS
- 31. Nesting The Parent Selector The & can follow other selectors, too! MAGIC Sass CSS
- 32. Sass Nesting The Parent Selector You can also append a suffix to the &! MAGIC CSS
- 33. Nesting Media Queries MAGIC THIS IS FREAKING AWESOME. Sass CSS Note: Matching media queries will not group together in the output.
- 35. 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.
- 36. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css Sass
- 37. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss • css $ sass sass/application.scss css/application.css Sass
- 38. 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
- 39. Imports File Structure • project_awesome • sass • lib • fontawesome.scss • base.scss • grid.scss • application.scss $ sass sass/ css/
- 40. 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
- 41. Import Partials • project_awesome • sass • lib • _fontawesome.scss • _base.scss • _grid.scss • application.scss • print.css $ sass sass/ css/
- 42. 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
- 43. VARIABLES
- 45. Variables Variables let you reuse single values. Sass
- 46. Variable Uses colors font sizes font families font paths padding margins breakpoints border-radius pseudo content shadows gradients SELECTORS! LOGIC! ALL THE THINGS!!!1!
- 48. Variable Dynamics • Mutable. • Can be interpolated. • Have scopes. Sass
- 49. MATH+ COLOR
- 50. Math • + addition • - subtraction • * multiplication • / division • % modulus Sass gives us basic math operations. Sass SassyCSS
- 51. 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.
- 52. Color Math We can even use math to manipulate colors. Sass
- 53. 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
- 54. MIXINS
- 55. Mixins Variables let you reuse single values Mixins let you reuse blocks of styles
- 56. Mixins Use CSS Sass Mixins output their contents where they are called.
- 57. Mixin Output Mixin Features • argument defaults • multiple arguments • optional arguments M AGIC CSS Sass
- 60. @extend Lets you group selectors and styles together MAGIC Sass CSS
- 61. Placeholders Placeholders can be @extended but will never compile to the CSS on their own MAGIC Sass CSS
- 62. Plus Lots More WIN
- 63. Functions
- 65. Each Loops
- 66. For Loops
- 67. While Loops
- 68. Maps Key-value pairs. • Multiple assignment in loops. • Lots of helper methods.
- 71. Resources Sass-Lang.com The Sass Way Sass For Web Designers Assembling Sass SassNews Newsletter SassConf SassConf 2013 Videos SassMeister Sass Style Guide #teamSass
- 72. 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.
- 73. <3
- 74. Thank You! Getting Sassy with CSS #SassyCSS bit.ly/getting-sassy Questions?