Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Sass Directives

Advanced Sass Directives

This is a presentation to the Wilmington, NC Web Development Meetup on Advanced Sass Directives.

55ea809c64e7bba42f566d7bdb4e106e?s=128

Allen Moore

May 06, 2015
Tweet

Transcript

  1. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass A DVA

    N C E D SAS S D I R E C T I V E S
  2. 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
  3. 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
  4. 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:
  5. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass A B

    O U T 1 0 U P
  6. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass We’re Hiring!

  7. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ -

    R U L E S A N D D I R E C T I V E S
  8. 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.
  9. 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.
  10. 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);
  11. 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.
  12. 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.
  13. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass @ e

    x t e n d 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, .btn-large, .btn-red { display: inline-block; padding: .5em 1em; font-size: .875em; } .btn-large, .btn-red { padding: 1em 2em; font-size: 1.25em; } .btn-red { border: 1px solid #000000; background-color: #ba1a1a; }
  14. 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 %.
  15. 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; }
  16. 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 class=“btn btn-large btn-red”>Button</ button> <button class=“btn-red”>Button</button> Reduces inheritance issues and dependencies.
  17. 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.
  18. 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 { }
  19. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass M I

    X I N D I R E C T I V E S
  20. 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.
  21. 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(); }
  22. 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%; } }
  23. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass F U

    N C T I O N D I R E C T I V E S
  24. 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.
  25. 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
  26. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass W H

    E R E TO G O F R O M H E R E
  27. 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
  28. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass Questions?