Organizing Stylesheets with CSS Pre-processors

1. CSS Pre-processors Harder, Better, Faster, Stronger leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06
2. CSS is dumb!
3. CSS is dumb! Not DRY (Don’t Repeat Yourself)
4. CSS is dumb! Not DRY (Don’t Repeat Yourself) Not Maintainable
5. CSS is dumb! Not DRY (Don’t Repeat Yourself) Not Maintainable Not Readable
6. .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; }
7. .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; } } } }
8. BETTER CSS SYNTAX NORMAL CSS COMPILER BROWSER
9. 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
10. Nice Features: Nesting Variables Mixins Operations
11. .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; }
12. .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
13. .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
14. .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 ???
15. @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
16. @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
17. @pink: #E82C64; @pageWidth: 700px; @lightPink: lighten(@pink, 20%); .data-table { .reusable-table(); tr { border: 1px solid @lightPink; } } Operations
18. @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
19. A “Design Pattern” for HTML/CSS using pre-processors
20. HTML Content + Style
21. HTML Content CSS Style
22. HTML Content CSS Style • Can’t create a separate “style structure”
23. HTML Content CSS Style • Can’t create a separate “style structure” • Too many classes pollute HTML with style info
24. HTML Content CSS Style ?
25. HTML Content LESS structure.less Mirror HTML structure and tie in styles LESS mixins.less Styles
26. HTML Content LESS structure.less Mirror HTML structure and tie in styles LESS mixins.less Styles LESS reset.less Resets, defaults, variables
27. Workflow
28. Server Web server that compiles automatically JS that compiles on page load App or command line tool
29. 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
30. 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).
31. leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06