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.

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