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