A B O U T M E • Over 10 years of professional design and development experience. • Developing using Sass for over three years. • Front-End Engineer at 10up
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass W H E R E TO F I N D M E Twitter: @creativeallen Personal Blog: allenmoore.me Github: http://github.com/allenmoore
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass A B O U T 1 0 U P A full service digital agency that makes web publishing and content management simple and fun. We serve such clients as:
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ i 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.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ i 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.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ i 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);
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ i m p o r t e x a m p l e s @import “variables”, “typography”; Would import both a variables partial and a typography partial.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ e 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.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ e 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 %.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass % p 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; }
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass W h 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 button> Button Reduces inheritance issues and dependencies.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ a 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.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ a t - r o o t e x a m p l e s .block { @at-root #{&}__element { } @at-root #{&}--modifier { } } .block { } .block__element { } .block--modifier { }
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass M i 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.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass M i x i n e x a m p l e s @mixin clearfix() { &:before, &:after { content: " "; display: table; } &:after { clear: both; } } .selector { @include clearfix(); }
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass M i 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%; } }
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass F u 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.
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass F u 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
Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass S i t e s t o h e l p y o u l e a r n m o r e ! • http://sass-lang.com • http://sassbreak.com • http://sitepoint.com/html-css/css/sass-css
allenmoore
niftycorp
clown0082
zakky21
trapezoid
h0r15h0
kasacchiful
mot_techtalk
kishida
chimame
kazupon
antyadev
sachag
sonatard
sferik
malarkey
destraynor
smashingmag
nonsquared
schacon
erikaheidi
bkeepers
frogandcode
thoeni