An Introduction to CSS Preprocessing

A quick introduction to preprocessing in CSS, briefly touching on how it works, and the key defining features.

Transcript

1. An Introduction to Preprocessing
2. What is it?
3. A CSS preprocesser is an extended style language that compiles into regular CSS.
4. A CSS preprocesser is an extended style language that compiles into regular CSS. .sass Compiler .css
5. Compiler .css .sass .sass .sass .sass manifest typography header styles banner styles
6. Compiler .css .sass .sass .sass .sass manifest typography header styles banner styles @import “path-to/file“;
7. Compiler .css .sass .sass .sass .sass manifest typography header styles banner styles @import “path-to/file“; This bit is automatic!
8. What’s so great about it?
9. It allows us to write DRYer code * * * It removes loads of mundane tasks * * * It speeds up our workflow
10. Choosing a Preprocesser
11. Sass (Scss) Currently the most popular choice. Requires Ruby. * * * Less Similar to Sass but uses Javascript. Easier to install, slower to compile. * * * Stylus Less popular than the others. Follows the CSS syntax less strictly.
12. A close fought contest but Sass wins * * * More documentation + a bigger community = Better support Quicker compiling, especially with the use of Compiler tools. Regular CSS is valid Scss (the newest Sass syntax)
13. A close fought contest but Sass wins * * * More documentation + a bigger community = Better support Quicker compiling, especially with the use of Compiler tools. Regular CSS is valid Scss (the newest Sass syntax) h1 color: #666 h1 { color: #666; } style.sass style.scss
14. Getting to know Sass
15. Nested Elements
16. section { margin: 5%; nav { height: 100px; } a { color: red; &:hover { color: green; } } } input - scss output - css section { margin: 5%; } section nav { height: 100px; } section a { color: red; } section a:hover { color: green; }
17. section { margin: 5%; nav { height: 100px; } a { color: red; &:hover { color: green; } } } input - scss output - css section { margin: 5%; } section nav { height: 100px; } section a { color: red; } section a:hover { color: green; }
18. .box { background: blue; header & { height: 100px; } &.green { background: green; } } input - scss output - css .box { background: blue; } header .box { height: 100px; } .box.green { color: green; }
19. .box { background: blue; header & { height: 100px; } &.green { background: green; } } input - scss output - css .box { background: blue; } header .box { height: 100px; } .box.green { color: green; } & = Parent Element
20. Variables
21. // Variables $color: #666; $font: ‘Open Sans‘; $size: 16px; $height: 1.6em; // Styles body { color: $color; font-family: $font; font-size: $size; line-height: $height; } input - scss output - css body { color: #666; font-family: ‘Open Sans‘; font-size: 16px; line-height: 1.6em; }
22. “If you need to write it twice, then you are doing it wrong” Dale Sande, Sass evangelist
23. Maths
24. $my-width: 100%; article { position: relative; width: $my-width - 25%; padding: $my-width / 20; &:after { position: absolute; top: $my-width * 2; left: $my-width + 10%; } } input - scss output - css article { position: relative; width: 75%; padding: 5%; } article:after { position: absolute; top: 200%; left: 110%; }
25. $my-width: 100%; article { position: relative; width: $my-width - 25%; padding: $my-width / 20; &:after { position: absolute; top: $my-width * 2; left: $my-width + 10%; } } input - scss output - css article { position: relative; width: 75%; padding: 5%; } article:after { position: absolute; top: 200%; left: 110%; }
26. h1 { font-size: 1em; color: #010203 + #040506; &:after { content: ‘foo ‘ + bar; } } input - scss output - css h1 { font-size: 1em; color: #050709; } h1:after { content: ‘foo bar‘; }
27. h1 { font-size: 1em; color: #010203 + #040506; &:after { content: ‘foo ‘ + bar; } } input - scss output - css h1 { font-size: 1em; color: #050709; } h1:after { content: ‘foo bar‘; } 01 02 03 04 05 06 05 07 09 + + + = = = input input output
28. Extends
29. .button { font-size: 1em; color: #010203; border: 1px solid; } nav a { background: #040506; @extend .button; } input - scss output - css .button, nav a { font-size: 1em; color: #010203; border: 1px solid; } nav a { background: #040506; }
30. .button { font-size: 1em; color: #010203; border: 1px solid; } nav a { background: #040506; @extend .button; } input - scss output - css .button, nav a { font-size: 1em; color: #010203; border: 1px solid; } nav a { background: #040506; } @extend adds the current selector to the original one
31. %clearfix { *zoom: 1; &:before, &:after { content: ‘‘; display: table; } &:after { clear: both; } } nav { @extend %clearfix; } main { @extend %clearfix; } input - scss output - css nav, main { *zoom: 1; } nav:before, main:before, nav:after, main:after { content: ‘‘; display: table; } nav:after, main:after { clear: both; }
32. %clearfix { *zoom: 1; &:before, &:after { content: ‘‘; display: table; } &:after { clear: both; } } nav { @extend %clearfix; } main { @extend %clearfix; } input - scss output - css nav, main { *zoom: 1; } nav:before, main:before, nav:after, main:after { content: ‘‘; display: table; } nav:after, main:after { clear: both; } % = Silent Element
33. Mixins
34. A mixin is similar to an extend, however it also allows us to pass in a set of arguments (variables) each time we call it.
35. @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; }
36. @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } Mixin name
37. @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } Mixin name Arguments
38. @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } Mixin name Arguments This is the code that is reused
39. @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } Arguments become placeholders where a value will be specified Mixin name Arguments
40. @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } aside { @include box-shadow(4px, 10px, 2px, #010203); } mixin scss aside { -webkit-box-shadow: 4px 10px 2px #010203; -moz-box-shadow: 4px 10px 2px #010203; box-shadow: 4px 10px 2px #010203; } input scss output css
41. Compiler .css .sass .sass .sass .sass manifest typography header styles banner styles
42. Compiler .css .scss .scss .scss mixins.scss aside.scss @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } aside { @include box-shadow(4px, 10px, 2px, #010203); } manifest
43. Compiler .css .scss .scss .scss Manifest mixins.scss aside.scss @mixin box-shadow($top, $left, $blur, $color) { -webkit-box-shadow: $top $left $blur $color; -moz-box-shadow: $top $left $blur $color; box-shadow: $top $left $blur $color; } aside { @include box-shadow(4px, 10px, 2px, #010203); }
44. There are mixins for everything...
45. @mixin linear-gradient($from, $to) { background-color: $to; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, $from, $to); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, $from, $to); /* FF3.6 */ background-image: -ms-linear-gradient(top, $from, $to); /* IE10 */ background-image: -o-linear-gradient(top, $from, $to); /* Opera 11.10+ */ background-image: linear-gradient(top, $from, $to); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr=’#{$from}’, EndColorStr=’#{$to}’); } a.button { @include linear-gradient(#010203, #040506); } mixin - scss Gradients input - scss
46. SVG Backgrounds mixin - scss input - scss @mixin svg-bg($name, $xpos, $ypos) { background: url(‘#{$name}.png’) no-repeat; background: none, url(‘#{$name}.svg’) no-repeat; background-position: $xpos $ypos; } .logo { @include svg-bg(logo, 50%, 0) }
47. Positioning @mixin pos($position, $args) { position: $position; $offsets: top right bottom left; @each $o in $offsets { $i: index($args, $o); @if $i and $i + 1 <= length($args) and type-of( nth($args, $i + 1) ) == number { #{$o}: nth($args, $i + 1); } } } @mixin absolute($args) { @include pos(absolute, $args); } @mixin fixed($args) { @include pos(fixed, $args); } @mixin relative($args) { @include pos(relative, $args); } mixin - scss input - scss main { @include relative(top 0 right 10px); } . . . article { @include absolute(top 50% left 50%); } . . . header { @include fixed(top 0 bottom auto); }
48. Positioning @mixin pos($position, $args) { position: $position; $offsets: top right bottom left; @each $o in $offsets { $i: index($args, $o); @if $i and $i + 1 <= length($args) and type-of( nth($args, $i + 1) ) == number { #{$o}: nth($args, $i + 1); } } } @mixin absolute($args) { @include pos(absolute, $args); } @mixin fixed($args) { @include pos(fixed, $args); } @mixin relative($args) { @include pos(relative, $args); } mixin - scss input - scss main { @include relative(top 0 right 10px); } . . . article { @include absolute(top 50% left 50%); } . . . header { @include fixed(top 0 bottom auto); } mixins within mixins!
49. Remember... You don’t need to know what every single line of code does to start using these today!
50. More documentation + A bigger community = Better Support
51. More documentation + A bigger community = Better Support Open Source mixins all over the web!
52. There are even libraries of mixins ready to use...
53. Now for a real world example
54. Media Queries made better
55. $viewport_palm: 500px; $viewport_lap: 800px; $viewport_desk: 1024px; @mixin bp($point) { @if $point == palm { @media (min-width: $viewport_palm - 1px) { @content; } } @else if $point == lap { @media (min-width: $viewport_palm) { @content; } } @else if $point == portable { @media (min-width: $viewport_lap) { @content; } } @else if $point == desk { @media (min-width: $viewport_desk) { @content; } } // additional breakpoints? Just state the argument @else { @media ($point) { @content; } } }
56. $viewport_palm: 500px; $viewport_lap: 800px; $viewport_desk: 1024px; @mixin bp($point) { @if $point == palm { @media (min-width: $viewport_palm - 1px) { @content; } } @else if $point == lap { @media (min-width: $viewport_palm) { @content; } } @else if $point == portable { @media (min-width: $viewport_lap) { @content; } } @else if $point == desk { @media (min-width: $viewport_desk) { @content; } } // additional breakpoints? Just state the argument @else { @media ($point) { @content; } } } Variables, so we can easily adjust our breakpoints
57. $viewport_palm: 500px; $viewport_lap: 800px; $viewport_desk: 1024px; @mixin bp($point) { @if $point == palm { @media (max-width: $viewport_palm - 1px) { @content; } } @else if $point == lap { @media (min-width: $viewport_palm) { @content; } } @else if $point == portable { @media (min-width: $viewport_lap) { @content; } } @else if $point == desk { @media (min-width: $viewport_desk) { @content; } } // additional breakpoints? Just state the argument @else { @media ($point) { @content; } } } Variables, so we can easily adjust our breakpoints A short name for our mixin (we’ll be using in lots)
58. $viewport_palm: 500px; $viewport_lap: 800px; $viewport_desk: 1024px; @mixin bp($point) { @if $point == palm { @media (max-width: $viewport_palm - 1px) { @content; } } @else if $point == lap { @media (min-width: $viewport_palm) { @content; } } @else if $point == portable { @media (min-width: $viewport_lap) { @content; } } @else if $point == desk { @media (min-width: $viewport_desk) { @content; } } // additional breakpoints? Just state the argument @else { @media ($point) { @content; } } } Variables, so we can easily adjust our breakpoints A short name for our mixin (we’ll be using in lots) Name our four breakpoints (whatever we like)
59. $viewport_palm: 500px; $viewport_lap: 800px; $viewport_desk: 1024px; @mixin bp($point) { @if $point == palm { @media (max-width: $viewport_palm - 1px) { @content; } } @else if $point == lap { @media (min-width: $viewport_palm) { @content; } } @else if $point == portable { @media (min-width: $viewport_lap) { @content; } } @else if $point == desk { @media (min-width: $viewport_desk) { @content; } } // additional breakpoints? Just state the argument @else { @media ($point) { @content; } } } Variables, so we can easily adjust our breakpoints A short name for our mixin (we’ll be using it a lot) Name our four breakpoints (whatever we like) Here we state the rule for each breakpoint.
60. nav { width: 100%; display: block; @include bp(lap) { width: 75%; float: left; } @include bp(portable) { width: 50%; } } input - scss output - css nav { width: 100%; display: block; } @media (min-width: 500px) { nav { width: 75%; float: left; } } @media (min-width: 800px) { nav { width: 50%; } }
61. nav { width: 100%; display: block; @include bp(lap) { width: 75%; float: left; } @include bp(portable) { width: 50%; } } input - scss output - css nav { width: 100%; display: block; } @media (min-width: 500px) { nav { width: 75%; float: left; } } @media (min-width: 800px) { nav { width: 50%; } } keep all your styles together
62. Getting started with Sass
63. 1. Download Codekit 2 incident57.com/codekit/
64. 2. Drop in your Project
65. .sass and .scss files will now compile every time you save
66. 2. Having Trouble?
67. Sass Documentation sass-lang.com/documentation/file.SASS_REFERENCE.html * * * Article - Getting Started with SASS alistapart.com/article/getting-started-with-sass * * * CSS Tricks Screencast css-tricks.com/video-screencasts/111-get-yourself-preprocessing-in-just-a-few-minutes/
68. A quick starter Project github.com/jsengstrom/scss-playground