Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Organizing Stylesheets with CSS Pre-processors

Erik Frisk
September 05, 2013

Organizing Stylesheets with CSS Pre-processors

Erik Frisk

September 05, 2013
Tweet

More Decks by Erik Frisk

Other Decks in Programming

Transcript

  1. .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; }
  2. .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; } } } }
  3. 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
  4. .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; }
  5. .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
  6. .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
  7. .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 ???
  8. @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
  9. @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
  10. @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
  11. HTML Content CSS Style • Can’t create a separate “style

    structure” • Too many classes pollute HTML with style info
  12. HTML Content LESS structure.less Mirror HTML structure and tie in

    styles LESS mixins.less Styles LESS reset.less Resets, defaults, variables
  13. 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
  14. 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).