Supercharge CSS with SASS

A quick introduction to SASS

Transcript

1. Supercharge CSS with SASS DARREN KOPP HTTP://DARRENKOPP.COM
2. Hi, my name is Darren Kopp  Web Developer at DevResults  Author of SassyStudio Visual Studio Extension  Open source  Supports VS2012, VS2013  Author of libsass-net project  Open source  Wraps libsass for use in .NET
3. The problem with CSS  Repetition, Repetition, Repetition  Rules are verbose  Rules are complex  Rules are brittle to change  Incredibly powerful styling, not so fun to write
5. Sass  Precompiler; superset of CSS3  Active development over past 7 years  Latest version (3.3) released March 7th, 2014  Two syntaxes  Indented (deprecated, like HAML)  Nested (Sassy CSS aka SCSS)
6. Documents & Partials  Documents are just like normal CSS files  Saved out as .css file (app.scss => app.css)  Partials are just like documents, but never compiled  Great for putting functions, mixins, etc  Prefixed with underscore, ie _Includes.scss
7. Nesting { Simple, Flexible, Smart }
8. SCSS mimics the HTML HTML SASS OUTPUT CSS
9. Smart Nesting Rules SASS CSS
10. Extending the parent rule  In a nested rule, you can reference the parent rule using the parent reference operator
11. You can add context to parent  You can easily prefix the parent reference operator to add additional context. Great for things like modernizer.
12. Nesting Properties  Just like selectors, properties can be nested and combined with ‘-’
13. @media bubbling  Media queries can be nested, but bubble up to the root of the document
14. Variables $necessary, $flexible, $money
15. Variables are smart  Variables can hold colors, text, numbers, units, etc  Smart defaulting system  Less brittle styling, less redundancy
16. Usable in selectors, properties, strings
17. Functions Massive built-in library Add your own
18. Custom Functions  Easily encapsulate common calculations, conversions, etc // This is the default html and body font-size for the base em value. $em-base: 16px !default; // Working in ems is annoying. Think in pixels by using this handy function @function emCalc($pxWidth) { @return $pxWidth / $em-base * 1em; } margin: emCalc(10px); => margin: 0.625em;
19. Color Functions  Inspection – hue, saturation, lightness, red, green, blue, alpha  HSL – lighten, darken, saturate, desaturate  Opacity – opacify, fade-in, transparentize, fade-out  Misc – adjust-color, scale-color, change-color, ie-hex-str
20. Number Functions  Percentage( 8 / 20 ) => 0.4  Round(1.51) => 2.0  Ceil(1.01) => 2.0  Floor(2.99) => 2.0  Abs(-4) => 4  Min(1,2,3,4,5) => 1  Max(1,2,3,4,5) => 5
21. List / String / Introspection Functions  List functions – length, nth, join, append, zip, index  String functions – unquote, quote  Introspection functions – type-of, unit, unitless, comparable  Misc – if
22. @extend Style combination
23. Powerful, Smart Extension
24. With great power…  color: #8c68a6;  Please don’t abuse @extend
25. @mixin Group of styles in one logical component
26. Work around browsers SCSS CSS
27. Encapsulate structure
28. Support Parameters
29. Default Values / Named Parameters
30. Variable-length Arguments
31. Composable
32. @media support  Media queries bubble out of mixins just like normal
33. @content
34. @import Better import, better design
35. Syntax  In a document, you can have multiple imports, and multiple files in a single import. Supports shorthand syntax.
36. Conditions @if, @else if, @else
37. Logic Blocks  Number Operators: >, >=, <, <=  Universal Operators: !=, ==
38. Loops @for, @while, @each
39. @for
40. @while
41. @each
42. Math Compile-time calculations
43. Sass is aware of units  Automatic conversion between units where conversion is known  Compilers throw errors when attempting to convert between units implicitly (em to px)  Mathematic operations allow for conversions between units like em and px (see emCalc method earlier)
44. Division is special
45. Color works too
46. Frameworks Pre-built components
47. Zurb Foundation  Zurb Foundation 5 – Released November 2013  Backed by Zurb team  Extensive component library  Grid System – Large, Medium, Small  Panels, Navigation, Buttons  Fantastic base mixins  http://foundation.zurb.com/
48. Compass  Actively developed for > 5 years  Ruby based (gem install compass)  Most extensive framework  Grid System (Blueprint)  Extensive library of functions, mixins  Built in reset framework  Includes many functions not possible in pure SASS  http://compass-style.org/
49. Bootstrap  Ported to SASS for 3.0  Built and supported by Twitter  One of the most popular frameworks on the internet currently  Grid System – XL, L, M, S, XS  Large amount of pre-built components  https://github.com/twbs/bootstrap-sass
50. Bourbon  New framework on the block  Includes many useful mixins, functions  Simple installation (gem install bourbon)
51. Compilers Taking care of the Magic
52. libsass  Created by Hampton Catlin (creator of SASS, HAML)  Open source, actively developed, working on 3.3 support  Wrapped by many projects  libsass-net – wrapper for .NET  node-sass – wrapper for node  sassc – wrapper for command line  Many more frameworks  https://github.com/hcatlin/libsass
53. sass gem  Core compiler for SASS  Ruby based, actively developed (baseline for others), full 3.3 support  Easy installation (gem install sass)  Supports both sass and scss syntaxes
54. compass  Created by Christopher Eppstein (CSS-Tricks.com)  Ruby based, open source, actively developed, nearing 3.3 support completion  Required when using compass project  Simple installation (gem install compass)  Can compile normal scss files that don’t use compass as well
55. Thank You Happy sassing!
56. Questions? @darrenkopp http://darrenkopp.com http://github.com/darrenkopp