CSS pre-processors

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

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!