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

CSS pre-processors

James Loveridge
February 11, 2014

CSS pre-processors

A seminar on CSS pre-processors (focusing on Sass in particular) for MA Web Design & Content Planning at University of Greenwich.

James Loveridge

February 11, 2014
Tweet

Other Decks in Design

Transcript

  1. CSS pre-processors by James Loveridge 12 February 2014

  2. Why use a CSS pre-processor?

  3. How does a CSS pre-processor work Write code Compile Done

  4. Pros & cons of using pre-processors Pros 1. Modular approach

    for styles 2. Re-use code across projects 3. Nested, smart styles Cons 1. The ability to do on-the- fly changes to the website on a live server is lost. 2. CSS is abstracted, adding another step to updates & changes.
  5. Popular CSS pre-processors Less: http://lesscss.org/ Sass: http://sass-lang.org/ Stylus: http://learnboost.github.io/stylus/

  6. Let’s talk about Sass Syntactically Awesome StyleSheets What does it

    do? Sass improves CSS with variables, mixins, extend and many more...
  7. Two different syntaxes Sass (older) $colour-primary: #333333 p font-size: 1em

    color: $colour-primary p strong text-transform: uppercase SCSS (newer) $colour-primary: #333333; p { font-size: 1em; color: $colour-primary; } p strong { text-transform: uppercase; } Spot the difference!
  8. Variables SCSS $font-stack: sans-serif; $colour-primary: #333333; $colour-hover: #669999; body {

    font: 100% $font-stack; color: $colour-hover; } a { color: $colour-primary; } a:hover { color: $colour-hover; } CSS output body { font: 100% sans-serif; color: #333333; } a { color: #333333; } a:hover { color: #669999; }
  9. Nested rules SCSS a { color: $colour-primary; text-decoration: none; &:hover

    { color: $colour-hover; } } CSS output a { color: #333333; text-decoration: none; } a:hover { color: #669999; }
  10. Mixins SCSS @mixin border-radius($radius){ -webkit-border-radius:$radius; -moz-border-radius:$radius; -ms-border-radius:$radius; -o-border-radius:$radius; border-radius:$radius; }

    .box { @include border-radius(10px); } CSS output .box { -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; }
  11. SCSS .message { border: 5px solid #ccc; padding: 10px; color:

    $colour-text; } .success { @extend .message; border-color: green; } .error { @extend .message; border-color: red; } Extend CSS output .message { border: 5px solid #ccc; padding: 10px; color: #333333; } .success { border: 5px solid green; padding: 10px; color: #333333; } .error { border: 5px solid red; padding: 10px; color: #333333; }
  12. Mathematics SCSS $base: 100%; body { font-size: $base; } h1

    { font-size: 2*$base; } h2 { font-size: 1.5*$base; } CSS output body { font-size: 100%; } h1 { font-size: 200%; } h2 { font-size: 150%; }
  13. How to compile Sass / SCSS files GUI client Command

    Line There are two ways of going about this. You can either use the command line or a GUI client.
  14. Types of compiling the CSS output Nested (Default) Compact Expanded

    Compressed You can decide on how you want to output the CSS file when you push it live. The options are:
  15. Let’s get sassy with CSS http://codepen.io/j_mes/pen/tKuxb

  16. Thank you for trying to stay awake!