CSS pre-processors - Speaker Deck

Slide 1

Slide 1 text

CSS pre-processors by James Loveridge 12 February 2014

Slide 2

Slide 2 text

Why use a CSS pre-processor?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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!

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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: