welch canavan (@xiwcx)
Front End Developer at National Geographic
former co-host of Sassy PGH
co-host of Sassy DC
$ gem install sass --pre
OR
head over to Sassmeister.com
is-quoted(), str-length(), str-index(), str-insert(), str-slice(), to-upper-case(), to-lower-case()
call(), function-exists(), mixin-exists(), inline if()
.scss
.block-element { &:active { ... } .unauthenticated & { ... } }
.css
.block-element:active { ... } .unauthenticated .block-element { ... }
.scss
.block-element { ... @at-root { #{&}--modifier { ... } } }
.css
.block-element { ... } .block-element--modifier { ... }
.scss
$bp-sm: 30em; $bp-med: 50em; $bp-lrg: 80em;
.scss
$breakpoints: ( $sm: 30em, $med: 50em, $lrg: 80em );
$ sass --debug-info style.scss:style.css
@media -sass-debug-info{ filename{ font-family:file\:\/\/\/Users\/wcanavan\/code\/test\/style\.scss } line{ font-family:\000033 } }
$ sass --sourcemap style.scss:style.css
{ "version": 3, "mappings": "AAEA,GAAI;EACA,KAAK,EAHD,IAAI", "sources": ["style.scss"], "file": "style.css" }
.scss
.block { ... .block-element { ... } }
.css
.block { ... } .block .block-element { ... }
.scss
.block { ... @at-root { .#{&}-element { ... } } }
.css
.block { ... } .block-element { ... }
Even Better: BEM Mixin Example by Scott Kellum
Nathan Weizenbaum, Chris Eppstein, Sam Richards, and Scott Kellum