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

Cutting Edge Sass - Sass Summit 2014

Stuart Robson
November 06, 2014

Cutting Edge Sass - Sass Summit 2014

With an expedited release cycle, Sass is getting more powerful, faster.

In this talk, Stuart will walk you through some of the exciting features available in Sass 3.3 and the features recently announced in Sass 3.4:

The @at-root Directive
The improved (&) Parent Selector
Maps
Selector Functions
Source Maps
Improved Control Directives & Functions
Backwards Incompatibilities

Along the way, Stuart will demonstrate examples of where you could use these new capabilities in your code and discus the things that have changed that could mean your existing code could break or react differently with the latest versions.

Stuart Robson

November 06, 2014
Tweet

More Decks by Stuart Robson

Other Decks in Design

Transcript

  1. Cutting Edge Sass • Sass 3.3 (Maptastic Maple) • Sass

    3.4 (Selective Steve) • LibSass 3.0 (Dragon Master) Sass Summit 2014 : Cutting Edge Sass
  2. • A More Flexible & • Source Maps • @at-root

    • Maps Sass 3.3 Sass Summit 2014 : Cutting Edge Sass
  3. CSS output Sass .block { background: #CC6699; &__element { padding:

    1em 3.12%; } &--modifier { font-size: 2em; } } Sass Summit 2014 : Cutting Edge Sass a { text-decoration: none; &:visited, &:hover { text-decoration: underline; } &:active { position: relative; top: 1px; } } a { text-decoration: none; } a:visited, a:hover { text-decoration: underline; } a:active { position: relative; top: 1px; }
  4. A More Flexible Parent Selector • can now be used

    for suffixes • &-suffix and &_suffix now work • Good for BEM Sass Summit 2014 : Cutting Edge Sass
  5. CSS output Sass .block { background: #CC6699; &__element { padding:

    1em 3.12%; } &--modifier { font-size: 2em; } } Sass Summit 2014 : Cutting Edge Sass .thing { background: #CC6699; &_suffix { padding: 1em 3.12%; } &-suffix { font-size: 2em; } } .thing { background: #CC6699; } .thing_suffix { padding: 1em 3.12%; } .thing-suffix { font-size: 2em; }
  6. CSS output Sass .block { background: #CC6699; &__element { padding:

    1em 3.12%; } &--modifier { font-size: 2em; } } Sass Summit 2014 : Cutting Edge Sass .block { background: #CC6699; &__element { padding: 1em 3.12%; } &--modifier { font-size: 2em; } } .block { background: #CC6699; } .block__element { padding: 1em 3.12%; } .block--modifier { font-size: 2em; }
  7. & .block { background: #CC6699; &__element { padding: 1em 3.12%;

    } &--modifier { font-size: 2em; } } Sass Summit 2014 : Cutting Edge Sass
  8. & // block .block { background: #CC6699; // block__element &__element

    { padding: 1em 3.12%; } // block--modifier &--modifier { font-size: 2em; } } Sass Summit 2014 : Cutting Edge Sass
  9. Source Maps • create a .json source map • tells

    the browser where the code is in the Sass file • a much better version of what debug could provide Sass Summit 2014 : Cutting Edge Sass
  10. Source Maps .foo { .bar { background-color: #CC6699; border: 0;

    } } Sass Summit 2014 : Cutting Edge Sass
  11. Source Maps Sass Summit 2014 : Cutting Edge Sass $

    sass --debug-info style.scss:style.css
  12. Source Maps .foo { .bar { background-color: #CC6699; border: 0;

    } } Sass Summit 2014 : Cutting Edge Sass
  13. Source Maps Sass Summit 2014 : Cutting Edge Sass $

    sass style.scss:style.css --sourcemap
  14. Source Maps /*# sourceMappingURL=style.css.map */ .foo { .bar { background-color:

    #CC6699; border: 0; } } Sass Summit 2014 : Cutting Edge Sass
  15. Source Maps Sass Summit 2014 : Cutting Edge Sass $

    sass style.scss:style.css --sourcemap
  16. Source Maps Sass Summit 2014 : Cutting Edge Sass $

    sass style.scss:style.css --sourcemap=none
  17. @at-root • They ‘jump out’ of the selectors to the

    root • @at-import (with: ...) and @at-import (without: ...) Sass Summit 2014 : Cutting Edge Sass
  18. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    h1 { font-size: 16px; @at-root { header { margin: 0 auto; width: 98%; } } } h1 { font-size: 16px; } header { margin: 0 auto; width: 98%; }
  19. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    @media (max-width: 960px) { .page { width: 100%; @at-root (without: media) { margin: 0 auto; width: 960px; } } } @media (max-width: 960px) { .page { width: 100%; } } .page { margin: 0 auto; width: 960px; }
  20. a list of lists • @each now allows multiple assignment

    • allowing the ability to run through lists of lists Sass Summit 2014 : Cutting Edge Sass
  21. A List of Lists $alerts: (error, red, 1px), (success, green,

    2px), (info, blue, 2px); @each $type, $color, $border-width in $alerts { .alert--#{$type} { border: $border-width solid $color; } } Sass Summit 2014 : Cutting Edge Sass
  22. A List of Lists .alert--error { border: 1px solid red;

    } .alert--success { border: 2px solid green; } .alert--info { border: 2px solid blue; } Sass Summit 2014 : Cutting Edge Sass
  23. Maps • A way to store key/value pairs • Comes

    with some functions, here’s a few • map-get • map-merge • map-remove Sass Summit 2014 : Cutting Edge Sass
  24. Maps $map: ( key: value, one-more-key: one-more-value ) $social-map:( facebook:

    #3b5998, googleplus: #dd4b39, instagram: #517fa4, twitter: #00aced ); Sass Summit 2014 : Cutting Edge Sass
  25. Maps $social-map:( facebook: #3b5998, googleplus: #dd4b39, instagram: #517fa4, twitter: #00aced

    ); @each $social-site, $bgcolor in $social-map { .profile—#{$social-site}:focus, .profile-#{$social-site}:hover { background: $bgcolor; } } Sass Summit 2014 : Cutting Edge Sass
  26. Maps (map-get) • map-get will return the value of the

    given key Sass Summit 2014 : Cutting Edge Sass $map: (key1: value1, key2: value2, key3: value3); .foo { color: map-get($map, key2); .foo { color: value2; }
  27. Maps // input success variables $input-success-font-color: #66CD00; $input-success-font-variant: italic; $input-success-border-size:

    2px; // input error variables $input-error-font-color: #CC1100; $input-error-font-weight: 700; $input-error-border-size: 4px; Sass Summit 2014 : Cutting Edge Sass
  28. Maps (map-get) // input success variables $input ( success-font-color: #66CD00,

    success-font-variant: italic, success-border-size: 2px ) .input.success { color: map-get($input, success-font—color); } // result .input.success { color: #66CD00; } Sass Summit 2014 : Cutting Edge Sass
  29. Maps (map-merge) • map-merge merges two maps together creating a

    new map Sass Summit 2014 : Cutting Edge Sass $map: (key1: value1, key2: value2, key3: value3); map-merge($map, (key1: new-value)) $map: (key1: new-value, key2: value2, key3: value3)
  30. Maps (map-remove) • map-merge merges two maps together creating a

    new map Sass Summit 2014 : Cutting Edge Sass $map: (key1: value1, key2: value2, key3: value3); map-remove($map, key1) $map: (key2: value2, key3: value3)
  31. • An Even More Flexible & • Selector Functions (crazy

    stuff) Sass 3.4 Sass Summit 2014 : Cutting Edge Sass
  32. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    .password { @at-root #{input + &} { color: red; } } input.password { color: red; }
  33. Selector Functions • selector-append • selector-extend • selector-nest • selector-parse

    • selector-replace • selector-unify • simple-selectors Sass Summit 2014 : Cutting Edge Sass
  34. selector-nest • nests the selector within one another Sass Summit

    2014 : Cutting Edge Sass selector-nest(".a, .b", ".c") .a .c, .b .c
  35. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    .password { @at-root #{input + &} { color: red; } } input.password { color: red; }
  36. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    #{selector-nest("input", "&.password")} { color: red; } input.password { color: red; }
  37. selector-replace • replaces the $original within a $selector, with $replacement

    Sass Summit 2014 : Cutting Edge Sass selector-replace($selector, $original, $replacement)
  38. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    .f-links { .f-item { .f-link { @include context('.f-item', '.f-item:hover') { text-decoration: underline; } } } } .f-links .f-item:hover .f-link { text-decoration: underline; }
  39. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    $validation-color: #CC6699; .personal-details--valid { color: $validation-color; } .bank-details--valid { $validation-color: #66CD00; color: $validation-color; } .vendor-details--valid { color: $validation-color; } .personal-details--valid { color: #cc6699; } .bank-details--valid { background-color: #cc6699; } .vendor-details--valid { background-color: #66cd00; }
  40. CSS output Sass Sass Summit 2014 : Cutting Edge Sass

    $validation-color: #CC6699; .personal-details--valid { color: $validation-color; } .bank-details--valid { $validation-color: #66CD00; color: $validation-color; } .vendor-details--valid { color: $validation-color; } .personal-details--valid { color: #cc6699; } .bank-details--valid { background-color: #66cd00; } .vendor-details--valid { background-color: #66cd00; }