Cutting Edge Sass - Sass Summit 2014

F479fe45ac0f50c0bdbe35c5757986f7?s=47 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.

F479fe45ac0f50c0bdbe35c5757986f7?s=128

Stuart Robson

November 06, 2014
Tweet

Transcript

  1. Sass Summit 2014 : Cutting Edge Sass Cutting Edge Sass

  2. Front-End Developer twitter/github/dribbble: @sturobson www: alwaystwisted.com Stuart Robson Sass Summit

    2014 : Cutting Edge Sass
  3. Stuart Robson Sass Summit 2014 : Cutting Edge Sass

  4. Stuart Robson Sass Summit 2014 : Cutting Edge Sass

  5. Stuart Robson Sass Summit 2014 : Cutting Edge Sass

  6. Stuart Robson Sass Summit 2014 : Cutting Edge Sass

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

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

    • Maps Sass 3.3 Sass Summit 2014 : Cutting Edge Sass
  9. & Sass Summit 2014 : Cutting Edge Sass

  10. 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; }
  11. 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
  12. 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; }
  13. 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; }
  14. & .block { background: #CC6699; &__element { padding: 1em 3.12%;

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

    { padding: 1em 3.12%; } // block--modifier &--modifier { font-size: 2em; } } Sass Summit 2014 : Cutting Edge Sass
  16. 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
  17. Source Maps .foo { .bar { background-color: #CC6699; border: 0;

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

    sass --debug-info style.scss:style.css
  19. Source Maps @media -Sass-debug-info{filename{font-family:file\:\/ \/\/DOMAIN\\.scss}line{font-family:\00003213} .foo .bar { background-color: #CC6699;

    border: 0; } Sass Summit 2014 : Cutting Edge Sass
  20. Sass Summit 2014 : Cutting Edge Sass

  21. Sass Summit 2014 : Cutting Edge Sass

  22. Sass Summit 2014 : Cutting Edge Sass

  23. Source Maps .foo { .bar { background-color: #CC6699; border: 0;

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

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

    #CC6699; border: 0; } } Sass Summit 2014 : Cutting Edge Sass
  26. Source Maps { "version": 3, "mappings": ";AAAA,IAAK;EACH,gBAAgB,EAAE,GAAG;EACrB,MAAM,EAAE,UAAU ", "sources": ["style.scss"],

    "names": [], "file": "style.css" } Sass Summit 2014 : Cutting Edge Sass
  27. Sass Summit 2014 : Cutting Edge Sass

  28. Sass Summit 2014 : Cutting Edge Sass

  29. Sass Summit 2014 : Cutting Edge Sass

  30. Sass Summit 2014 : Cutting Edge Sass

  31. Sass Summit 2014 : Cutting Edge Sass

  32. Sass Summit 2014 : Cutting Edge Sass

  33. Sass Summit 2014 : Cutting Edge Sass

  34. Sass Summit 2014 : Cutting Edge Sass

  35. Sass Summit 2014 : Cutting Edge Sass

  36. Sass Summit 2014 : Cutting Edge Sass

  37. Sass Summit 2014 : Cutting Edge Sass ?

  38. Source Maps Sass Summit 2014 : Cutting Edge Sass $

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

    sass style.scss:style.css
  40. Source Maps Sass Summit 2014 : Cutting Edge Sass $

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

    root • @at-import (with: ...) and @at-import (without: ...) Sass Summit 2014 : Cutting Edge Sass
  42. 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%; }
  43. 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; }
  44. Sass Summit 2014 : Cutting Edge Sass

  45. a list of lists • @each now allows multiple assignment

    • allowing the ability to run through lists of lists Sass Summit 2014 : Cutting Edge Sass
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. Maps .profile-facebook:focus, .profile-facebook:hover { background: #3b5998; } .profile-googleplus:focus, .profile-googleplus:hover {

    background: #dd4b39; } /… Sass Summit 2014 : Cutting Edge Sass
  52. 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; }
  53. 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
  54. 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
  55. 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)
  56. 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)
  57. • An Even More Flexible & • Selector Functions (crazy

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

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

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

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

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

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

    Sass Summit 2014 : Cutting Edge Sass selector-replace($selector, $original, $replacement)
  64. selector-replace @mixin context($original-context, $new-context) { @at-root #{selector-replace(&, $original-context, $new-context)} {

    @content; } } Sass Summit 2014 : Cutting Edge Sass
  65. 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; }
  66. Incompatibilities Sass Summit 2014 : Cutting Edge Sass

  67. 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; }
  68. 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; }
  69. Sass Summit 2014 : Cutting Edge Sass

  70. Sass Summit 2014 : Cutting Edge Sass Cutting Edge Sass

  71. Sass Summit 2014 : Cutting Edge Sass Keep Sass Simple