css preprocessors

18
CSS Preprocessors Writing styles that you can actually manage

Upload: chris-barr

Post on 27-Jan-2015

110 views

Category:

Technology


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: CSS preprocessors

CSS PreprocessorsWriting styles that you can actually manage

Page 2: CSS preprocessors

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

Page 3: CSS preprocessors

Google Images says...

Page 4: CSS preprocessors

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;

}

Page 5: CSS preprocessors

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;

}

Page 6: CSS preprocessors

CSS Preprocessors to the rescue!

*.sass and *.scss

Page 7: CSS preprocessors

Big SASS Features

● Code nesting! (less repetition)

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

But you are still just writing CSS!

Page 8: CSS preprocessors
Page 9: CSS preprocessors
Page 10: CSS preprocessors

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

Page 11: CSS preprocessors

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

Page 12: CSS preprocessors

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)

Page 13: CSS preprocessors

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

Page 14: CSS preprocessors

DEMO

Page 15: CSS preprocessors

More Mixins & Extensions

bourbon.io compass-style.org

Page 16: CSS preprocessors
Page 17: CSS preprocessors

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

Page 18: CSS preprocessors

Just kidding, this is the last slide.