CSS Pre-processors Harder, Better, Faster, Stronger leanmachine.se ▪ [email protected] ▪ 2013-09-06 

CSS is dumb! 

CSS is dumb! Not DRY (Don’t Repeat Yourself) 

CSS is dumb! Not DRY (Don’t Repeat Yourself) Not Maintainable 

CSS is dumb! Not DRY (Don’t Repeat Yourself) Not Maintainable Not Readable 

.data-table { width: 700px; margin: 30px auto; background: #f8f8f8; } .data-table tr { border: 1px solid green; } .data-table tr td { padding: 10px; } .data-table tr td.highlight { background: green; } 

.data-table { width: 700px; margin: 30px auto; background: #f8f8f8; } .data-table tr { border: 1px solid green; } .data-table tr td { padding: 10px; } .data-table tr td.highlight { background: green; } .data-table { width: 700px; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid green; td { padding: 10px; &.highlight { background: green; } } } } 

BETTER CSS SYNTAX NORMAL CSS COMPILER BROWSER 

LESS lesscss.org .data-table { width: 700px; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid green; td { padding: 10px; &.highlight { background: green; } } } } Sass sass-lang.com .data-table { width: 700px; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid green; td { padding: 10px; &.highlight { background: green; } } } } Stylus learnboost.github.io/stylus .data-table width 700px margin 30px auto background #f8f8f8 tr border 1px solid green td padding 10px &.highlight background green 

Nice Features: Nesting Variables Mixins Operations 

.data-table { width: 700px; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid green; td { padding: 10px; &.highlight { background: green; } } } } Nesting .data-table { width: 700px; margin: 30px auto; background: #f8f8f8; } .data-table tr { border: 1px solid #E82C64; } .data-table tr td { padding: 10px; } .data-table tr td.highlight { background: #E82C64; } 

.data-table { width: 700px; margin: 30px auto; background: #f8f8f8; } .data-table tr { border: 1px solid #E82C64; } .data-table tr td { padding: 10px; } .data-table tr td.highlight { background: #E82C64; } @pink: #E82C64; @pageWidth: 700px; .data-table { width: @pageWidth; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid @pink; td { padding: 10px; &.highlight { background: @pink; } } } } Variables 

.data-table { width: 700px; margin: 30px auto; background: #f8f8f8; } .data-table tr { border: 1px solid #E82C64; } .data-table tr td { padding: 10px; } .data-table tr td.highlight { background: #E82C64; } @pink: #E82C64; @pageWidth: 700px; .reusable-table() { width: @pageWidth; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid black; td { padding: 10px; &.highlight { background: @pink; } } } } .data-table { .reusable-table(); tr { border: 1px solid @pink; } } Mixins 

.data-table { width: 700px; margin: 30px auto; background: #f8f8f8; } .data-table tr { border: 1px solid #E82C64; } .data-table tr td { padding: 10px; } .data-table tr td.highlight { background: #E82C64; } @pink: #E82C64; @pageWidth: 700px; .reusable-table() { width: @pageWidth; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid black; td { padding: 10px; &.highlight { background: @pink; } } } } .data-table { .reusable-table(); tr { border: 1px solid @pink; } } Mixins ??? 

@pink: #E82C64; @pageWidth: 700px; .reusable-table() { width: @pageWidth; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid black; td { padding: 10px; &.highlight { background: @pink; } } } } .data-table { .reusable-table(); tr { border: 1px solid @pink; } } Mixins 

@pink: #E82C64; @pageWidth: 700px; .reusable-table(@w:700px) { width: @w; margin: 30px auto; background: #f8f8f8; tr { border: 1px solid black; td { padding: 10px; &.highlight { background: @pink; } } } } .data-table { .reusable-table(); tr { border: 1px solid @pink; } } Mixins 

@pink: #E82C64; @pageWidth: 700px; @lightPink: lighten(@pink, 20%); .data-table { .reusable-table(); tr { border: 1px solid @lightPink; } } Operations 

@pink: #E82C64; @pageWidth: 700px; @lightPink: lighten(@pink, 20%); @cellWidth: 200px; @cellPadding: 20px; .data-table { .reusable-table(); tr { border: 1px solid @lightPink; td { width: (@cellWidth - 2*@cellPadding); padding: @cellPadding; } } } Operations 

A “Design Pattern” for HTML/CSS using pre-processors 

HTML Content + Style 

HTML Content CSS Style 

HTML Content CSS Style • Can’t create a separate “style structure” 

HTML Content CSS Style • Can’t create a separate “style structure” • Too many classes pollute HTML with style info 

HTML Content CSS Style ? 

HTML Content LESS structure.less Mirror HTML structure and tie in styles LESS mixins.less Styles 

HTML Content LESS structure.less Mirror HTML structure and tie in styles LESS mixins.less Styles LESS reset.less Resets, defaults, variables 

Workflow 

Server Web server that compiles automatically JS that compiles on page load App or command line tool 

Logo Page 1 Page 2 Page 3 The best thing since sliced bread in three easy steps. Step 1 Step 2 Step 3 Heading Cupcake ipsum dolor sit amet pie dessert faworki fruitcake. Bear claw cupcake candy. Powder ice cream muffin sweet. Cupcake sugar plum bear claw chupa chups wafer biscuit chocolate cake chocolate bar. Cotton candy sweet roll carrot cake oat cake gingerbread toffee jelly-o chocolate chocolate cake. Tart chocolate lemon drops jelly-o muffin oat cake. Pudding candy canes wypas candy carrot cake. Pastry wypas tiramisu chocolate. Pudding pastry brownie cupcake soufflé. Macaroon muffin danish dessert jujubes 

Logo Page 1 Page 2 Page 3 The best thing since sliced bread in three easy steps. Step 1 Step 2 Step 3 Heading Cupcake ipsum dolor sit amet pie dessert faworki fruitcake. Bear claw cupcake candy. Powder ice cream muffin sweet. Cupcake sugar plum bear claw chupa chups wafer biscuit chocolate cake chocolate bar. Cotton candy sweet roll carrot cake oat cake gingerbread toffee jelly-o chocolate chocolate cake. Tart chocolate lemon drops jelly-o muffin oat cake. Pudding candy canes wypas candy carrot cake. Pastry wypas tiramisu chocolate. Pudding pastry brownie cupcake soufflé. Macaroon muffin danish dessert jujubes Exercise Build out this simple page using LESS and the suggested stylesheet design pattern (structure.less, mixins.less, reset.less). 

leanmachine.se ▪ [email protected] ▪ 2013-09-06