Upload
ed-moore
View
212
Download
1
Tags:
Embed Size (px)
DESCRIPTION
Talk on CSS Preprocessors from Creative Coders in Singapore
Citation preview
Welcome to Creative Coders!
CSS Preprocessors
Ed Moore
twitter: @_edmoore
gplus: +EdMoore
github: eddiemoore
CSS is Awesome
Single Element
FIRE
CSS SUCKS
CSS3 not consistant across browsers
Modularisation sucks
Hard to stay DRY
No Variables*
Vendor Prefixes‐webkit‐whatever: something‐moz‐whatever: something‐o‐whatever: something‐ms‐whatever: somethingwhatever: something
Enter CSS Preprocessors
Any valid CSS file is a valid SASS/LESS/Stylus file
Variables
SASS$primaryColor: #BADA55;
a { color: $primaryColor;}
LESS@primaryColor: #BADA55;
a { color: @primaryColor;}
StylusprimaryColor = #BADA55
a color: primaryColor
Nesting
.module { width: 500px; a { color: red; } ul { li { display: inline‐block; a { color: pink; } } }}
.module { width: 500px;}.module a { color: red;}.module ul li { display: inline‐block;}.module ul li a { color: pink;}
Avoid inception
Only go 3 levels deep
BAD#mything .module .something ul li a { ... }
Partials
Break up your styles@import 'base/reset';@import 'base/typography';
@import 'layout/grid';...
Functions
@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;}
div { @include box‐shadow(2px, 2px, 5px, rgba(0,0,0,0.3));}
div { ‐webkit‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3); ‐moz‐box‐shadow: 2px 2px 5px rgba(0,0,0,0.3); box‐shadow: 2px 2px 5px rgba(0,0,0,0.3);}
Maths Operations
.col‐1‐2 { width: (100% / 2);}.col‐1‐3 { width: (100% / 3);}.col‐2‐3 { width: (100% / 3) * 2;}
.col‐1‐2 { width: 50%;}.col‐1‐3 { width: 33.33333%;}.col‐2‐3 { width: 66.66667%;}
Extending / Inheritance
.foo { color: red;}.bar { @extend .foo;}
.foo, .bar { color: red;}
Referencing Parent Selectors
a { color: red; &;:hover { color: pink; }}
a { color: red;}a:hover { color: pink;}
a { color: red; .module &; { color: green; }}
a { color: red;}.module a { color: green;}
Colour Functions
button { background: #000; &;:hover { color: lighten(#000, 20%); }}
button { background: #000;}button:hover { background: #333333;}
Loops
$total‐columns: 6;$col‐widths: ();@for $i from 1 through $total‐columns { @for $j from 1 through $i { $w: ($j/$i); @if index($col‐widths, $w) == false { .col‐#{$j}‐#{$i} { width: $w * 100%; } $col‐widths: append($col‐widths, $w, comma); } }}
.col‐1‐1 { width: 100%; }
.col‐1‐2 { width: 50%; }
.col‐1‐3 { width: 33.33333%; }
.col‐2‐3 { width: 66.66667%; }
.col‐1‐4 { width: 25%; }
.col‐3‐4 { width: 75%; }
.col‐1‐5 { width: 20%; }
.col‐2‐5 { width: 40%; }
.col‐3‐5 { width: 60%; }
.col‐4‐5 { width: 80%; }
.col‐1‐6 { width: 16.66667%; }
.col‐5‐6 { width: 83.33333%; }
Utilities
StylusNib
LessLess Hat
How the *!@$ do I turn all that into CSS?!?
Embrace the command line
Tools
LiveReload
CodeKit (OSX only)
Compass.app
Prepros
Koala
Less.app (OSX only)
Crunch! (Less)
Future
CSS Variables:root { ‐‐main‐bg‐color: brown;}
.one { background‐color: var(‐‐main‐bg‐color);}
Note: The custom property prefix was var- in the earlier spec, but later changed to --. Firefox 31 and above follow thenew spec.
MozillaCan I Use
Ed Mooretwitter: @_edmoore
gplus: +EdMoore
github: eddiemoore
slides: http://bit.ly/1gQqRoe