$30 off During Our Annual Pro Sale. View Details »

Advanced Sass Directives

Advanced Sass Directives

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

Allen Moore

May 06, 2015
Tweet

More Decks by Allen Moore

Other Decks in Programming

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

    View Slide

  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

    View Slide

  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

    View Slide

  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:

    View Slide

  5. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass
    A B O U T 1 0 U P

    View Slide

  6. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass
    We’re Hiring!

    View Slide

  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

    View Slide

  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.

    View Slide

  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.

    View Slide

  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);

    View Slide

  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.

    View Slide

  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.

    View Slide

  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;
    }

    View Slide

  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 %.

    View Slide

  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;
    }

    View Slide

  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
    button>
    Button
    Reduces inheritance issues and dependencies.

    View Slide

  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.

    View Slide

  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 {
    }

    View Slide

  19. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass
    M I X I N D I R E C T I V E S

    View Slide

  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.

    View Slide

  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();
    }

    View Slide

  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%;
    }
    }

    View Slide

  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

    View Slide

  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.

    View Slide

  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

    View Slide

  26. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass
    W H E R E TO G O F R O M H E R E

    View Slide

  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

    View Slide

  28. Allen Moore • @creativeallen • #ilmwdsass • allenmoore.me/ilmwdsass
    Questions?

    View Slide