Intro to Sass

For a Sass workshop at work

Transcript

1. AN INTRO TO AND A BIT OF GULP AND POSTCSS
2. 1. What is Sass? 2. Similarity to LESS 3. Examples of syntax 4. Bit about gulp and postcss
3. WHAT IS SASS?
4. SASS IS A PRE-PROCESSOR
5. Pre-processors extend CSS with variables, operators, functions, mixins and many more other features.
7. TWO TYPES OF SASS
8. *.sass SASS SYNTAX (MORE LIKE RUBY) AKA "Indented syntax"
9. @import reset $bgColor: #f00 $fgColor: #00f body background: $bgColor color: $fgColor p font-weight: bold
10. =border-radius($radius) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius .box +border-radius(10px)
11. SASS SYNTAX DOESN'T USE SEMICOLONS OR BRACKETS
12. WHITESPACE IS VERY IMPORTANT FOR DENOTING STRUCTURE
13. MIXIN DEFINITION AND USAGE IS MORE IMPLICIT
14. *.scss SCSS SYNTAX (MORE LIKE CSS) AKA "Sassy CSS"
15. @import reset; $bgColor: #f00; $fgColor: #00f; body { background: $bgColor; color: $fgColor; p { font-weight: bold; } }
16. @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }
17. SCSS SYNTAX IS MORE LIKE CSS IN THAT IT USES SEMICOLONS AND BRACKETS
18. WHITESPACE IS LESS IMPORTANT
19. MIXIN DEFINITION AND USAGE IS EXPLICIT
20. FROM HERE ON WHEN I TALK ABOUT SASS I'M ACTUALLY REFERRING TO SCSS (IT'S JUST EASIER TO SAY)
21. SASS IS SIMILAR TO LESS
22. MIXINS
23. LESS .textColor(@color) { color: @color; } .redText { .textColor(#f00); }
24. SASS @mixin textColor($color) { color: $color; } .redText { @include textColor(#f00); }
25. VARIABLES
26. LESS @property: color; .widget { @{property}: #0ee; background-@{property}: #999; }
27. SASS $property: color; .widget { #{$property}: #0ee; background-#{$property}: #999; }
28. LOOPS
29. HAHAHAHAHAHAHAHAHA
30. LESS .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration } div { .loop(5); // launch the loop } // ! wtf?
31. SASS @for $n from 1 though 5 { // includes limit div { width: 10px * $n; } } // Also available: @each, @while // ! #notbiased
32. ! INFORMATION OVERLOAD !
33. SASS BASICS
34. VARIABLES $color1: #f00; // can use hex colors $color2: red; // named colors $color3: rgb(255,0,0); // rgb colors $color4: darken($color1, 20%); // built-in functions // and other variables $unitSize: 10px; // values $width: 10 * $unitSize; // maths
35. DATA STRUCTURES $peopleWithoutKids: Max, Callum, Rich; // comma separated $peopleWithKids: Morgan Aymeric Dave; // space separated $peopleWithPets: "Max", "Dave", "Morgan"; // quoted // Nested structures... $favouriteColors: ("Max", #73a325), ("Callum", rgb(255,140,0)); // Maps! $mappy: ( bar: #f00, cof: #fee, );
36. REAL-WORLD EXAMPLE $cards: (A, ace), (2, two), (3, three), (4, four), (5, five), (6, six), (7, seven), (8, eight), (9, nine), (10, ten), (J, jack), (Q, queen), (K, king) ;
37. PUTTING THE DATA TO USE @each $card in $cards { $imgPath: '../assets/cards'; $class: nth($card, 1); $filename: '#{$imgPath}/card-#{nth($card, 2)}.png'; .card-#{$card} { background-image: url($filename); } }
38. .card-A { background-image: url('../assets/cards/card-ace.png'); } .card-2 { background-image: url('../assets/cards/card-two.png'); } // ... .card-K { background-image: url('../assets/cards/card-king.png'); }
39. IF/ELSE STATEMENTS
40. // A function with an @if statement @function bestColor($baseColor, $light, $dark) { $bestColor: $light; // If our $baseColor is light, @if (lightness($baseColor) > 50%) { // set our $bestColor to $dark $bestColor: $dark; } @return $bestColor; }
41. // Use it... $btnColor: #111; .btn-primary { background-color: $btnColor; color: bestColor($btnColor, #fff, #000); }
42. // Output: .btn-primary { background-color: #111; color: #fff; }
43. SASS IS GREAT FOR REUSABILITY
44. MIXINS USED FOR BIG CHUNKS OF CODE
45. @mixin button($fgColor, $bgColor) { background-color: $bgColor; color: $fgColor; &:hover { background-color: lighten($bgColor, 10%); } &.disabled { background-color: desaturate($bgColor, 90%); color: rgba($fgColor, .6); } }
46. .btn-primary { @include button(#fff, #73a325); } .btn-secondary { @include button(#111, #fafafa); }
47. .btn-primary { background-color: #73a325; color: #fff; } .btn-primary:hover { background-color: #85bd2b; } .btn-primary.disabled { background-color: #9ea396; color: rgba(255, 255, 255, .6); } .btn-secondary { // ... etc. }
48. $buttons: ( 'primary': (#fff, #73a325), 'secondary': (#111, #fafafa), ); @each $class, $colors in $buttons { .btn-#{$class} { $fg: nth($colors, 1); $bg: nth($colors, 2); @include button($fg, $bg); } }
49. PROS RE-USABLE CHUNKS OF CODE
50. CONS GENERATED CSS MIGHT BE LARGER
51. FUNCTIONS USED FOR DISCRETE BITS OF CODE
52. @function multiplyUnit($unit, $multiplier) { @return $unit * $multiplier; } @function capitalize($string) { @return to-upper-case( str-slice("#{$string}", 1, 1) ) + str-slice("#{$string}", 2); }
53. $things: 'primary', 'secondary', 'tertiary'; @each $thing in $things { .thing-#{$thing} { &::after { content: capitalize($thing); // e.g. Primary } } }
54. PROS FACTOR OUT COMPLEX/RE-USABLE LOGIC
55. CONS NOT TYPED, CAN GET MESSY...
56. EXTENDS & PLACEHOLDERS
57. %placeholderStyle { background: red; border-radius: 50px; } .extendedStyle { background: blue; border-radius: 100px; } .btn-primary { @extend .extendedStyle; } .btn-secondary { @extend %placeholderStyle; color: #fff; } .btn-tertiary { @extend .extendedStyle; color: #000; }
58. .btn-secondary { background: red; border-radius: 50px; } .extendedStyle, .btn-primary, .btn-tertiary { background: blue; border-radius: 100px; } .btn-secondary { color: #fff; } .btn-tertiary { color: #000; }
59. PROS ELEMENTS @EXTENDING A STYLE ARE GROUPED TOGETHER IN THE GENERATED CSS SUPER DRY
60. CONS ELEMENTS @EXTENDING A STYLE ARE GROUPED TOGETHER IN THE GENERATED CSS OUTPUT ORDER CHANGES, EXTENDS ARE "HOISTED" TO DEFINITION.
61. BUILT IN FUNCTIONS
62. ✨ COLOR FUNCTIONS ✨ darken($color, $amount) // darken a color lighten($color, $amount) // lighten a color rgba($color, $opacity) // named/hex colors to rgba red($color) // get red value of a color mix($color1, $color2, $amount) // Mixes two colors
63. ! STRING AND NUMBER FUNCTIONS ! unquote($string) // Removes quotes from a string str-length($string) // Returns the length of a string min($numbers) // Finds the minimum of several numbers max($numbers) // Finds the maximum of several numbers unitless($number) // Returns whether a number has units
64. AND LOADS MORE... READ THE SASS DOCS HTTP://SASS-LANG.COM/DOCUMENTATION/SASS/SCRIPT/FUNCTIONS.HTML
65. NESTING
66. // Traditional CSS .menu {} .menu .menu-item {} .menu .menu-item a {} .menu .menu-item a:hover {}
67. // Magical SCSS nesting .menu { &-item { a { &:hover { } } } }
68. PROS EASIER TO READ STRUCTURE AND SEE RELATIONSHIP BETWEEN STYLES DRY STYLE DECLARATION
69. CONS EASY TO GENERATE OVER-SPECIFIC CSS
70. IMPORTS
71. // Standard CSS import, will work as usual @import "foo/bar.css"; // SCSS import, pulls content in to file @import "foo/bar.scss"; // Can also omit the extension @import "foo/bar"; // Can also traverse directories @import "../baz/bar";
72. GULP
73. Gulp is a javascript-based task runner that lets you automate common tasks
74. # 1. install node # 2. install npm # 3. install gulp globally: $ npm install -g gulp # 4. install all WebClient dependencies $ npm install .
75. # Builds Sass files $ gulp build:sass # Deletes all generated CSS files $ gulp clean:sass # Watches for changes to Sass files # and then builds changed files $ gulp watch:sass
76. TAKING AGES TO BUILD YOUR SASS?
77. COMMENT SOME LINES IN gulpfile.js
78. POSTCSS
79. PostCSS is a tool for transforming styles with Javascript.
80. WE USE IT TO AUTOPREFIX AND GENERATE SOME IMAGE PREFETCH STYLES
81. WHAT'S NEXT?
82. 1. Convert all LESS to Sass 2. Get you all up to speed with using Sass 3. Refactor existing Sass code
83. 1. Convert all LESS to Sass 2. Get you all up to speed with using Sass 3. Refactor existing Sass code
84. 1. Convert all LESS to Sass 2. Get you all up to speed with using Sass 3. Refactor existing Sass code