m p o r t • Extends the CSS @import rule to allow it to import SCSS and Sass files. All files will be merged together into a single CSS output file. • Takes a filename to import. By default, it looks for a Sass file to import directly, but there are a few conditionals for this rule: • The file’s ext is .css. • The filename begins with http://. • The filename is a url(). • The @import has any media queries.
m p o r t e x a m p l e s @import "foo.scss"; or @import "foo"; While both of these would import foo.scss, the second example is preferred by most and is considered the industry standard.
m p o r t e x a m p l e s @import “foo.css"; @import “foo” screen; @import “http://foo.com/bar”; @import url(foo); @import “foo.css"; @import “foo” screen; @import “http://foo.com/bar”; @import url(foo);
x t e n d • The @extend directive tells Sass that one selector should inherit the styles of another selector. • The @extend directive works by inserting the extended selector anywhere in the stylesheet that the extended selector appears. • Selectors can extend another selector that in turn extends another. • Selector sequences, such as .header .nav or .header + .nav, currently can’t be extended. However, it is possible for nested selectors themselves to use @extend.
x t e n d - O n l y S e l e c t o r s ( o r % p l a c e h o l d e r s ) • These are styles that you will only ever extend and never use directly in HTML. • Reduces unnecessary CSS when stylesheets are generated. • You can use them or ignore them. • Look like class and id selectors, except the # or . is replaced with by %.
l a c e h o l d e r e x a m p l e s %btn { display: inline-block; padding: .5em 1em; font-size: .875em; } %btn-large { @extend %btn; padding: 1em 2em; font-size: 1.25em; } .btn-red { @extend %btn-large; border: 1px solid #000000; background-color: #ba1a1a; } .btn-red { display: inline-block; padding: .5em 1em; font-size: .875em; } .btn-red { padding: 1em 2em; font-size: 1.25em; } .btn-red { border: 1px solid #000000; background-color: #ba1a1a; }
y u s e @ e x t e n d a n d % p l a c e h o l d e r <button class=“btn btn-large btn-red”>Button</ button> <button class=“btn-red”>Button</button> Reduces inheritance issues and dependencies.
t - r o o t • The @at-root directive causes one of more rules to be emitted at the root of the document, rather than being nested beneath their parent selectors.
x i n s • Allow you to define styles that can be re-used through the stylesheets without needing to resort to non- semantic classes like .float-left. • Can contain full CSS rules, and anything allow elsewhere in a Sass document. • Can take arguments which allows you to produce a wide variety of style with very few mixins.
x i n e x a m p l e s @mixin clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } .selector { @include clearfix(); }
x i n e x a m p l e s @mixin bp($name) { @if not map-has-key($breakpoints, $name) { @warn "Invalid breakpoint `#{$name}`."; } @else { @if map-get($breakpoints, $name) { @media (min-width: (map-get($breakpoints, $name))){ @content; } } @else { @content; } } } .selector { width: 100%; @include bp(large) { float: left; width: 50%; } }
n c t i o n s • It’s possible to define your own functions in Sass and use them in any value or script context. • Can access any globally defined variables as well as accept arguments just like a mixin. • A function may have several statements contained within it, and you must call @return to set the return value of the function.
n c t i o n e x a m p l e s $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) { @return $n * $grid-width + ($n - 1) * $gutter-width; } .sidebar { width: grid-width(5); } .sidebar { width: 240px; } Manually calculation: 5 * 40 + (5 - 1) * 10 = 240
allenmoore
quiver
hanhan1978
fsubal
sullis
gunnarmorling
chobishiba
pangmoo
lovee
seike460
joergneumann
ttskch
hollycummins
shpigford
mraible
mongodb
chriscoyier
addyosmani
paulrobertlloyd
samanthasiow
matthewcrist
keavy
tammielis
speakerdeck
thekraken
