CSS Pre-Processors: Stylus, Less & Sass

Given originally at http://frontenddesignconference.com.

Updated for:

• http://eduiconf.org/
• http://ncdevcon.com/
• http://www.fitc.ca/unleashed
• http://futureofwebdesign.com/nyc-2013/

An overview of the popular pre-processors: Stylus, Less & Sass, with features subdivided up into easy to learn sections of beginner, intermediate and advanced.

Transcript

1. CSS PRE-PROCESSORS Sass / Less / Stylus
2. TOPICS 1. What is a preprocessor 2. Preprocessors (Less, Sass, Stylus) 3. Setup 4. Features (beginner, intermediate, advanced) 5. Frameworks
3. CSS PRE-PROCESSORS What is a Preprocessor?
4. @bermonpainter #teamsass
5. master.scss _normalize.scss _typography.scss _grid.scss _modules.scss _theme.scss master.css
9. CSS PRE-PROCESSORS If you write sucky CSS, a pre-processor won’t make it suck less.
10. QUICK START
11. GUI APPS
12. QUICK START
16. COMMAND LINE
17. COMMAND LINE $ gem install sass $ mv style.css style.scss $ sass style.scss style.css Sass
18. COMMAND LINE <install node> <install npm> $ npm install less $ lessc style.less Less
19. COMMAND LINE <install node> <install npm> $ npm install stylus $ stylus -c style.styl Stylus
24. WISEHEA RT D ESIGN → The designer’s guide to the OSX command prompt A tutorial for the modern web designer The command prompt. Once the lofty domain of that guy you know with the computer science degree. Now more and more the every day domain of the hacker web designer. Perhaps you’ve mastered a little Javascript or PHP, but you are realizing that the cool kids are playing around with stuff that is only accessible to people who are comfortable with the command prompt. Or, perhaps you are just
25. COMPILING
26. COMPILING Local
27. COMPILING On Deploy
28. COMPILING On Request
29. COMPILING On the Client (don’t do this)
30. SYNTAX
31. SYNTAX .widget { margin: 20px 10px; } ! ! .widget margin: 20px 10px Sass
32. SYNTAX .widget { margin: 20px 10px; } Less
33. SYNTAX .widget { margin: 20px 10px; } ! .widget margin 20px 10px Stylus
34. BEGINNER
35. BEGINNER style.css > style.scss | style.less | style.styl Creating a pre-processed file Just change the file extension
36. BEGINNER $colorPrimary: #333; $siteWidth: 960px; ! body { color: $colorPrimary; width: $siteWidth; } Variables – Sass
37. BEGINNER @colorPrimary: #333; @siteWidth: 960px; ! body { color: @colorPrimary; width: @siteWidth; } Variables – Less
38. BEGINNER colorPrimary #333 siteWidth 960px ! body color colorPrimary width siteWidth Variables – Stylus
39. BEGINNER body { color: #333; width: 960px; } Variables – Output
40. BEGINNER nav { width: 200px; }
 nav ul { list-style: none; }
 nav ul li { background: #ccc; } nav ul li a{ color: #333; } Nesting - CSS
41. BEGINNER nav { width: 200px; ! ul { list-style: none; ! li { background: #ccc; ! a {
 color: #ccc; } } } } Nesting - Sass/Less
42. BEGINNER Nesting - Stylus nav width 200px ! ul list-style none ! li background #ccc ! a 
 color #ccc
43. BEGINNER nav { width: 200px; }
 nav ul { list-style: none; }
 nav ul li { background: #ccc; } nav ul li a{ color: #333; } Nesting - Output
44. BEGINNER Nesting Pay attention to specificity
45. BEGINNER nav { width: 200px; ! ul { list-style: none; } li { background: #ccc; } a {
 color: #ccc; } } Nesting - Sass/Less
46. BEGINNER Nesting - Stylus nav width 200px ! ul list-style none ! li background #ccc ! a 
 color #ccc
47. BEGINNER nav { width: 200px; }
 nav ul { list-style: none; }
 nav li { background: #ccc; } nav a{ color: #333; } Nesting - Output
48. BEGINNER nav {
 margin: 0; padding: 20px; a{ color: #000; } a:hover, a:focus { color: #999; } a:active { color: #333; } } Reference Selector
49. BEGINNER nav {
 margin: 0; padding: 20px; a{ color: #000; &:hover, &:focus { color: #999; } ! &:active { color: #333; } } } Reference Selector - Sass/Less
50. BEGINNER nav 
 margin 0 padding 20px ! a color #000 ! &:hover, &:focus color #999 ! &:active color #333 Reference Selector - Stylus
51. BEGINNER nav {
 margin: 0; padding: 20px; } nav a{ color: #000; } nav a:hover, nav a:focus { color: #999; } nav a:active { color: #333; } Reference Selector - Output
52. BEGINNER nav { margin: 0; padding: 20px; ! .ie6 & { padding: 10px; } .ie7 & { padding: 20px; }
 .touch & { width: 100%; } } Reference Selector - Sass/Less
53. BEGINNER nav margin 0 padding 20px ! .ie6 & padding 10px .ie7 & padding 20px 
 .touch & width 100% Reference Selector - Stylus
54. BEGINNER nav { margin: 0; padding: 20px; } .ie6 nav{ padding: 10px; } .ie7 nav { padding: 20px; }
 .touch nav { width: 100%; } Reference Selector - Output
55. master.scss _normalize.scss _typography.scss _grid.scss _modules.scss _theme.scss master.css Title Text @import BEGINNER
56. BEGINNER @import "setup"; @import "reset"; @import "base"; @import "layout"; @import "typography"; @import "theme"; @import – Sass/Less
57. BEGINNER @import "setup" @import "reset" @import "base" @import "layout" @import "typography" @import "theme" @import – Stylus
58. INTERMEDIATE
59. INTERMEDIATE .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } Mixins - CSS
60. INTERMEDIATE @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(5px); } Mixins - Sass
61. INTERMEDIATE .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .box { .border-radius(5px); } Mixins - Less
62. INTERMEDIATE border-radius radius -webkit-border-radius radius -moz-border-radius radius -ms-border-radius radius -o-border-radius radius border-radius radius ! .box border-radius 5px Mixins - Stylus
63. INTERMEDIATE .box { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } Mixins - Output
64. INTERMEDIATE .borders { border: 1px solid #efefef; padding: 10px; } p { @extend .borders; font-size: 20px; } ul, ol { @extend .borders; text-transform: uppercase; } @extend – Sass
65. INTERMEDIATE .borders { border: 1px solid #efefef; padding: 10px; } p { &:extend(.borders); font-size: 20px; } ul, ol { &:extend(.borders); text-transform: uppercase; } :extend – Less
66. INTERMEDIATE .borders border 1px solid #efefef padding 10px ! p @extend .borders font-size 20px ! ul, ol @extend .borders text-transform uppercase @extend – Stylus
67. INTERMEDIATE .borders, p, ul, ol { border: 1px solid #efefef; padding: 10px; } p {
 font-size: 20px; } ul, ol { text-transform: uppercase; } @extend – Output
68. INTERMEDIATE %borders { border: 1px solid #efefef; padding: 10px; } p { @extend %borders; font-size: 20px; } ul, ol { @extend %borders; text-transform: uppercase; } @extend + Placeholder – Sass
69. INTERMEDIATE %borders border 1px solid #efefef padding 10px ! p @extend %borders font-size 20px ! ul, ol @extend %borders text-transform uppercase @extend + Placeholder – Stylus
70. INTERMEDIATE p, ul, ol { border: 1px solid #efefef; padding: 10px; } p {
 font-size: 20px; } ul, ol { text-transform: uppercase; } @extend – Stylus
71. ADVANCED
72. ADVANCED $grid-columns: 12; $grid-width: 960px; ! @function calculate-column-width($cols) { @return (($grid-width / $grid-columns) * $cols / $grid-width) * 100%; } ! #container { margin: 0 auto; width: 100%; } article { float: left; width: calculate-column-width(8); } aside { float: right; width: calculate-column-width(4); } Functions – Sass
73. ADVANCED @grid-columns: 12; @grid-width: 960px; ! .calculate-column-width(@cols) { width: (((@grid-width / @grid-columns) * @cols / @grid-width) * 100%); } ! #container { margin: 0 auto; width: 100%; } article { float: left; .calculate-column-width(8); } aside { float: right; .calculate-column-width(4); } Functions – Less
74. ADVANCED grid-columns 12 grid-width 960px ! calculate-column-width(cols) ((grid-width / grid-columns) * cols / grid-width) * 100% ! #container margin 0 auto width 100% ! article float left width calculate-column-width(8) ! aside float right width calculate-column-width(4) Functions – Stylus
75. ADVANCED #container { margin: 0 auto; width: 100%; } article { float: left; width: 66.66667%; } aside { float: right; width: 33.33333%; } Functions – Output
76. ADVANCED rgba($color, $alpha) hue($color) saturation($color) lightness($color) adjust-hue($color, $degrees) lighten($color, $amount) darken($color, $amount) saturate($color, $amount) desaturate($color, $amount) grayscale($color) complement($color) invert($color) Color Functions – Sass
77. ADVANCED lighten(@color, amount); darken(@color, amount); saturate(@color, amount); desaturate(@color, amount); fadein(@color, amount); fadeout(@color, amount); fade(@color, amount); spin(@color, amount); Color Functions – Less
78. ADVANCED rgba(color, alpha) lighten(color, amount) darken(color, amount) desaturate(color, amount) saturate(color, amount) invert(color) hue(color) saturation(color) lightness(color) Color Functions – Stylus
79. ADVANCED @if @else if @else @then @for @each @while Control Directives – Sass
80. ADVANCED when Control Directives – Less
82. ADVANCED if else if else unless for Control Directives – Stylus
83. ADVANCED @mixin buttons($color, $type) { @if $type == "flat" { background-color: $color; } @else if $type == "gradient" { background: linear-gradient($color, darken($color, 20%)); } @else if $type == "glossy" { background: linear-gradient($color 50%,darken($color, 20%) 50%); } @else { background-color: $color; } } .button { @include buttons(green, glossy); } if, else – Sass
84. ADVANCED .buttons (@color, @type) when (@type == "flat") { background-color: @color; } .buttons (@color, @type) when (@type == "gradient") { background: linear-gradient(@color, darken(@color, 20%)); } .buttons (@color, @type) when (@type == "glossy") { background: linear-gradient(@color 50%, darken(@color, 20%) 50%); } ! .button { .buttons(green, glossy); } when (if, else) – Less
85. ADVANCED buttons(color, type) if type == "flat" background-color color else if type == "gradient" background linear-gradient(color, darken(color, 20%)) else if type == "glossy" background linear-gradient(color 50%,darken(color, 20%) 50%) else background-color color ! .button buttons(green, glossy) if, else – Stylus
86. ADVANCED .button { background: linear-gradient(#008000 50%, #001a00 50%); } if, else – Output
87. ADVANCED @for $i from 1px to 5px { .border-#{$i} { border: $i solid #000; } } for loop – Sass
88. ADVANCED .border-1px { border: 1px solid black; } .border-2px { border: 2px solid black; } .border-3px { border: 3px solid black; } .border-4px { border: 4px solid black; } for loop – Output
89. ADVANCED $emotions: happy sad excited mustached; ! @each $emotion in $emotions { .feeling-#{$emotion} { background-image: url("images/feeling-#{$emotion}"); } } each loop – Sass
90. ADVANCED .feeling-happy { background-image: url("images/feeling-happy"); } .feeling-sad { background-image: url("images/feeling-sad"); } .feeling-excited { background-image: url("images/feeling-excited"); } .feeling-mustached { background-image: url("images/feeling-mustached"); } each loop – Output
91. ADVANCED $small-breakpoint: 480px; $medium-breakpoint: 768px; $large-breakpoint: 1024px; ! aside { width: 100%; @media screen and (min-width: $small-breakpoint) { width: 100px; float: right; } @media screen and (min-width: $medium-breakpoint) { width: 200px; } @media screen and (min-width: $large-breakpoint) { width: 400px; } } Media Queries – Sass
92. ADVANCED @small-breakpoint: 480px; @medium-breakpoint: 768px; @large-breakpoint: 1024px; ! aside { width: 100%; @media screen and (min-width: @small-breakpoint) { width: 100px; float: right; } @media screen and (min-width: @medium-breakpoint) { width: 200px; } @media screen and (min-width: @large-breakpoint) { width: 400px; } } Media Queries – Less
93. ADVANCED small-breakpoint 480px medium-breakpoint 768px large-breakpoint 1024px ! aside width 100% ! @media screen and (min-width small-breakpoint) width 100px float right ! @media screen and (min-width medium-breakpoint) width 200px @media screen and (min-width large-breakpoint) width 400px Media Queries – Stylus
94. ADVANCED aside { width: 100%; } @media screen and (min-width: 480px) { aside { width: 100px; float: right; } } @media screen and (min-width: 768px) { aside { width: 200px; } } @media screen and (min-width: 1024px) { aside { width: 400px; } } Media Queries – Output
95. ADVANCED @mixin respond-to($name){ @if $name == small-screen { @media only screen and (min-width: 320px) { @content } } @if $name == large-screen { @media only screen and (min-width: 960px) { @content } } } aside { width: 25% @include respond-to(small-screen) { width: 100%; } } @content – Sass
96. ADVANCED aside { width: 25% } ! @media only screen and (min-width: 320px) { aside { width: 100% } } @content – Output
97. ADVANCED $icons: ( home: e601, about: e602, services: e603 ); ! @each $icon-name, $icon-keycode in $icons { .icon-#{$icon-name} { &:before { content: "#{$icon-keycode}"; } } } Hash Maps – Sass
98. ADVANCED icons = { home: e601, about: e602, services: e603 } ! for icon-name, icon-keycode in icons { .icon-{icon-name} { &:before { content: “\{icon-keycode}"; } } } Hash Maps – Stylus
99. ADVANCED .icon-home:before { content: “\e601"; } .icon-about:before { content: “\e602"; } .icon-services:before { content: “\e603"; } Hash Maps – Output
100. FRAMEWORKS
111. fin.