Skip to content

sass.md

Latest commit

 

History

History
47 lines (25 loc) · 1.39 KB

sass.md

File metadata and controls

47 lines (25 loc) · 1.39 KB

Sass

Outcome

You'll:

  • Have a general understanding of Sass.
  • Have a good understanding of:
    • Variables
    • Importing

Other than importing / variables, the other features are a nice to have right now.

Prerequisites

  • HTML and CSS foundations

Advice

We'll use the extension .scss

Another alternative is LESS, which is very, very similar, but slighty worse IMO.

The whole point is to make CSS less rubbish :). The most common features we'll use are: variables and imports. I personally don't use the advanced features that much.

Bootstrap can be imported purely as Sass, you can then override a massive list of variables to control almost every aspect of how it works (colors, paddings, fonts etc.).

There are bunch of useful Sass things in library Bourbon.

Building Sass

Sass is 'compiled': .scss -> .css (since .css is source code it's technically a 'transpile' (fancy!))

So you write your website in .scss, .html and .js and you 'build' it to .css, .html and .js

We will use a tool called webpack to help do this compilation (and later, other compilations for javascript)

Learning materials

Core

Tasks

  • Run through code school + tasks (you can do this quite quickly, variables are important, the rest is nice to know)