'Advanced' Sasswith 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 1getting

• bundle up your variables, save space

• refer to them dynamically

• syntax, functions

• a map of $sizes

Maps 2iterations / arguments

• pass them to functions or mixins

• iterate through them (since they also lists)

• maps as args

• smart transitions

Maps 3merging

• 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.