CSS preprocessors

CSS PreprocessorsWriting styles that you can actually manage

So, what is CSS?

● Not a programming language● Possibly a declarative language

"In computer science, declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow."

- Wikipedia

● Possibly a style sheet language

(CSS is the only style sheet language listed on Wikipedia)

the only

Google Images says...

CSS is great and all, but...#comments .comment-author {

font-size: 18px;

font-weight: bold;

}

#comments .comment {

background: #f2f2f2;

border: 1px solid #e2c2fd;

}

#comments .comment:hover {

border-color: #c685fc;

}

#comments .comment.byuser {

border-color: #fda6a7;

}

#comments .comment.byuser:hover {

border-color: #fc6b6d;

}

CSS is great and all, but...#comments .comment-author {

font-size: 18px;

font-weight: bold;

}

#comments .comment {

background: #f2f2f2;

border: 1px solid #e2c2fd;

}

#comments .comment:hover {

border-color: #c685fc;

}

#comments .comment.byuser {

border-color: #fda6a7;

}

#comments .comment.byuser:hover {

border-color: #fc6b6d;

}

CSS Preprocessors to the rescue!

*.sass and *.scss

Big SASS Features

● Code nesting! (less repetition)

● Math & color manipulation● Variables!● Mixins! (functions)

But you are still just writing CSS!

Code Nesting

#primary-nav {

display: block;

padding: 10px;

a {

color: #1155CC;

display: inline-block;

padding: 5px 10px;

&:hover {

color: lightblue;

}

}

}

#primary-nav {

display: block;

padding: 10px;

}

#primary-nav a {

color: #1155CC;

display: inline-block;

padding: 5px 10px;

}

#primary-nav a:hover {

color: lightblue;

}

SCSS Generated CSS

Variables & Such

$color-link: #1155CC;

$color-link-hover: lighten($color-link, 25%);

$spacing: 5px;

a {

color: $color-link;

padding: $spacing $spacing*2;

&:hover {

color: $color-link-hover;

}

}

a {

color: #1155CC;

padding: 5px 10px;

}

#primary-nav a:hover {

color: #69ACF3;

}

SCSS Generated CSS

Color Manipulation$myColor: #2A547E; //#2A547E

saturate($myColor, 20%); //#19548f

desaturate($myColor, 20%); //#3b546d

lighten($myColor, 25%); //#5e94c9

darken($myColor, 25%); //#1d3a58

grayscale($myColor); //#545454

complement($myColor); //#7e542a

invert($myColor); //#d5ab81

$fadedColor: opacity($myColor, 0.7);

//rgba(42, 84, 126, 0.3)

transparentize($fadedColor, 30%);

//rgba(42, 84, 126, 0.6)

Mixins (functions)

@mixin rounded($radius) {

-webkit-border-radius: $radius;

-moz-border-radius: $radius;

border-radius: $radius;

}

@mixin opacity($opacity) {

opacity: $opacity / 100;

filter: alpha(opacity=$opacity);

}

#myElement{

@include rounded(5px);

@include opacity(80);

}

#myElement{

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

opacity: 0.8;

filter: alpha(opacity=80);

}

Mixins SCSS

Generated CSS

DEMO

More Mixins & Extensions

bourbon.io compass-style.org

This is the last slide.

SASS sass-lang.comLESS lesscss.orgStylus learnboost.github.com/stylus

● Mindscape Web Workbench○ mindscapehq.com/products/web-workbench○ free, but crippled.

● Web Tools○ Newest update -2012.2 adds LESS support!○ asp.net/vnext/overview/fall-2012-update

compass-style.orgbourbon.io

Visual Studio Integration

CSS Preprocessors SASS Extensions

sass-lang.com/tutorial.htmlthesassway.com

Learnings

Just kidding, this is the last slide.