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

    View full-size slide

  2. Why use a CSS pre-processor?

    View full-size slide

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

    View full-size slide

  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.

    View full-size slide

  5. Popular CSS pre-processors
    Less: http://lesscss.org/
    Sass: http://sass-lang.org/
    Stylus: http://learnboost.github.io/stylus/

    View full-size slide

  6. Let’s talk about Sass
    Syntactically
    Awesome
    StyleSheets
    What does it do?
    Sass improves CSS with variables, mixins,
    extend and many more...

    View full-size slide

  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!

    View full-size slide

  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;
    }

    View full-size slide

  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;
    }

    View full-size slide

  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;
    }

    View full-size slide

  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;
    }

    View full-size slide

  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%;
    }

    View full-size slide

  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.

    View full-size slide

  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:

    View full-size slide

  15. Let’s get sassy with CSS
    http://codepen.io/j_mes/pen/tKuxb

    View full-size slide

  16. Thank you for trying
    to stay awake!

    View full-size slide