Getting Sassy with CSS
9 likes4,304 views
This document introduces Sass, a CSS preprocessor created by Hampton Catlin in 2007, designed to enhance the capabilities of standard CSS by offering features like nesting, variables, and mixins. It outlines the advantages of using Sass, including improved modularity and maintainability, and provides installation instructions and usage examples. Additionally, it emphasizes best practices for using Sass effectively while avoiding common pitfalls.
![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.
“](https://image.slidesharecdn.com/gettingsassywithcss-140529235800-phpapp01/85/Getting-Sassy-with-CSS-16-320.jpg)
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?