CSS

3 major CSS weaknesses

•  Lack of essential basic features
• Hard to maintain (huge messy CSS files)
• Not DRY enough - leads to mistakes

“Variables... finally!”

Less, Sass, Stylus

You have to use 

• @ for less variables
• $   for Sass
• = for Stylus

Less, Sass, Stylus They don't enhance CSS, but improve your development workflow

$my_blue: #4e6cb0; // Sass

@my_blue: #4e6cb0; // Less

my_blue = #4e6cb0; // Stylus

$primary_color: $my_blue;

h1 {

color: $primary_color;

}

$fonts: Helvetica, Arial, sans-serif;

$images_path: "../img/"

$font-size: 1.5em;

$margin: 20px;

$width: 80%;

Color functions

$light_blue: lighten($my_blue, 20%);

$flashy_blue: saturate($my_blue, 50%);

Nesting

.link {

            &:hover {

                    }

}

// ======== OUTPUT ========

.link {}

.link:hover {}

Don't nest too much (4 levels max)

• Sass is written in Ruby
• Less and Stylus are written in JavaScript

- This does NOT mean you need Ruby or Node on your production server to use them.

- You need them on your 

development machine