Cutting Edge Sass - Sass Summit 2014

Slide 1

Slide 1 text

Sass Summit 2014 : Cutting Edge Sass Cutting Edge Sass

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Stuart Robson Sass Summit 2014 : Cutting Edge Sass

Slide 4

Slide 4 text

Stuart Robson Sass Summit 2014 : Cutting Edge Sass

Slide 5

Slide 5 text

Stuart Robson Sass Summit 2014 : Cutting Edge Sass

Slide 6

Slide 6 text

Stuart Robson Sass Summit 2014 : Cutting Edge Sass

Slide 7

Slide 7 text

Cutting Edge Sass • Sass 3.3 (Maptastic Maple) • Sass 3.4 (Selective Steve) • LibSass 3.0 (Dragon Master) Sass Summit 2014 : Cutting Edge Sass

Slide 8

Slide 8 text

• A More Flexible & • Source Maps • @at-root • Maps Sass 3.3 Sass Summit 2014 : Cutting Edge Sass

Slide 9

Slide 9 text

& Sass Summit 2014 : Cutting Edge Sass

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Source Maps .foo { .bar { background-color: #CC6699; border: 0; } } Sass Summit 2014 : Cutting Edge Sass

Slide 18

Slide 18 text

Source Maps Sass Summit 2014 : Cutting Edge Sass $ sass --debug-info style.scss:style.css

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Sass Summit 2014 : Cutting Edge Sass

Slide 21

Slide 21 text

Sass Summit 2014 : Cutting Edge Sass

Slide 22

Slide 22 text

Sass Summit 2014 : Cutting Edge Sass

Slide 23

Slide 23 text

Source Maps .foo { .bar { background-color: #CC6699; border: 0; } } Sass Summit 2014 : Cutting Edge Sass

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Source Maps /*# sourceMappingURL=style.css.map */ .foo { .bar { background-color: #CC6699; border: 0; } } Sass Summit 2014 : Cutting Edge Sass

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Sass Summit 2014 : Cutting Edge Sass

Slide 28

Slide 28 text

Sass Summit 2014 : Cutting Edge Sass

Slide 29

Slide 29 text

Sass Summit 2014 : Cutting Edge Sass

Slide 30

Slide 30 text

Sass Summit 2014 : Cutting Edge Sass

Slide 31

Slide 31 text

Sass Summit 2014 : Cutting Edge Sass

Slide 32

Slide 32 text

Sass Summit 2014 : Cutting Edge Sass

Slide 33

Slide 33 text

Sass Summit 2014 : Cutting Edge Sass

Slide 34

Slide 34 text

Sass Summit 2014 : Cutting Edge Sass

Slide 35

Slide 35 text

Sass Summit 2014 : Cutting Edge Sass

Slide 36

Slide 36 text

Sass Summit 2014 : Cutting Edge Sass

Slide 37

Slide 37 text

Sass Summit 2014 : Cutting Edge Sass ?

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

@at-root • They ‘jump out’ of the selectors to the root • @at-import (with: ...) and @at-import (without: ...) Sass Summit 2014 : Cutting Edge Sass

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

Sass Summit 2014 : Cutting Edge Sass

Slide 45

Slide 45 text

a list of lists • @each now allows multiple assignment • allowing the ability to run through lists of lists Sass Summit 2014 : Cutting Edge Sass

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Maps .profile-facebook:focus, .profile-facebook:hover { background: #3b5998; } .profile-googleplus:focus, .profile-googleplus:hover { background: #dd4b39; } /… Sass Summit 2014 : Cutting Edge Sass

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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)

Slide 56

Slide 56 text

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)

Slide 57

Slide 57 text

• An Even More Flexible & • Selector Functions (crazy stuff) Sass 3.4 Sass Summit 2014 : Cutting Edge Sass

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

Selector Functions • selector-append • selector-extend • selector-nest • selector-parse • selector-replace • selector-unify • simple-selectors Sass Summit 2014 : Cutting Edge Sass

Slide 60

Slide 60 text

selector-nest • nests the selector within one another Sass Summit 2014 : Cutting Edge Sass selector-nest(".a, .b", ".c") .a .c, .b .c

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

CSS output Sass Sass Summit 2014 : Cutting Edge Sass #{selector-nest("input", "&.password")} { color: red; } input.password { color: red; }

Slide 63

Slide 63 text

selector-replace • replaces the $original within a $selector, with $replacement Sass Summit 2014 : Cutting Edge Sass selector-replace($selector, $original, $replacement)

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

Incompatibilities Sass Summit 2014 : Cutting Edge Sass

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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