You are on page 1of 21

'Advanced' Sass

with Maps and other stuff
Who am I
• @lunelson
• Canadian freelance dev/designer
• long-time user of CSS pre-processors (LESS, Stylus, Sass,
Libsass)
• disclosure: I have always used a CSS pre-processor
• disclosure: I have never given a presentation about them
What is Sass
Sass is a CSS pre-processor. Which is...
• kinda like PHP for HTML
• kinda like CoffeeScript for Javascript
• anyway, all about CSS output
Imperative -> Meta-Declarative
Sass in review
• $variables and math
• partial files
• nesting
gist?
* Variables are the gateway drug
* Nesting is often overused
Sass in review
• @mixins
• @functions
gist?
* Sass mixins are arbitrary blocks!
Sass in review
• conditional directives
• @if, @else if, @else
• lists and loops
• @while, @for
gist?
* Lists are a powerful data-type
Sass in review
• @extend
• %placeholder selectors
• string #{$interpolation}
gist?
* @extend is a shotgun method!
* You can't interpolate variables
...and ?
Sass advanced
• the map data-type
• @each, @content, @at-root, unique-id()
Maps
...are...
• more or less the Sass equivalent of objects / hashes /
dictionaries etc.
• an extension of lists (lists of pairs)
Maps
...allow us to...
• dynamically collect and reference (by name)
• pass complex arguments
• multi-iterate
• and still manipulate as with lists
Maps
...because
• giant configs are ugly
• variables don't interpolate
• lists are not enough
Maps 1
getting
• bundle up your variables, save
space
• refer to them dynamically
• syntax, functions
• a map of $sizes
Maps 2
iterations / arguments
• pass them to functions or mixins
• iterate through them (since they also
lists)
• maps as args
• smart transitions
Maps 3
merging
• store references
• statuses
• calculated / generated values
• color system generation
Maps 4
• @content enables fake scope
• @at-root and 'unique-id()' enable
dynamic placeholder storage/ref
some variations on 'smart' include/
extend mixins
• global flag
• list self-check
• map self-check
case study: media queries, dimensions,
typography
• maps configure a mobile-first cascade of media-queries/
devices -based dimensions and sizing
• setup @mixins populate these maps through merge
operations
• outputs are automated for basic elements across all queries
case study: media queries, dimensions,
typography
• @content-based @mixins manage fake scopes
• context-aware @functions automate query-based or
typography-based value lookups
result
• abstracted away verbosity, repetition and complexity
• modeled a meta-declarative level on our mental-model,
design-logic and 'cascade' of media-queries
• added new utilities e.g scope-/context-aware functions
• query-value() function looks up values
• rem() function converts absolute values per context
Thanks for watching.