CSS PreprocessorsWriting styles that you can actually manage
So, what is CSS?● Not a programming language● Possibly a declarative language   "In computer science, declarative programm...
Google Images says...
CSS is great and all, but...            #comments .comment-author {              font-size: 18px;              font-weight...
CSS is great and all, but...            #comments .comment-author {              font-size: 18px;              font-weight...
CSS Preprocessors to the rescue!             *.sass and *.scss
Big SASS Features●   Code nesting! (less repetition)●   Math & color manipulation●   Variables!●   Mixins! (functions)    ...
Code NestingSCSS                               Generated CSS#primary-nav {                     #primary-nav {    display: ...
Variables & SuchSCSS                                      Generated CSS$color-link: #1155CC;                     a {$color...
Color Manipulation$myColor: #2A547E;           //#2A547Esaturate($myColor, 20%);     //#19548fdesaturate($myColor, 20%);  ...
Mixins        (functions)Mixins                               SCSS@mixin rounded($radius) {            #myElement{  -webki...
DEMO
More Mixins & Extensions     bourbon.io       compass-style.org
This is the last slide.CSS Preprocessors                                  SASS ExtensionsSASS sass-lang.com               ...
Just kidding, this is the last slide.
CSS preprocessors
CSS preprocessors
CSS preprocessors
Upcoming SlideShare
Loading in...5
×

CSS preprocessors

400

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
400
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS preprocessors

  1. 1. CSS PreprocessorsWriting styles that you can actually manage
  2. 2. 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 the only (CSS is the only style sheet language listed on Wikipedia)
  3. 3. Google Images says...
  4. 4. 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; }
  5. 5. 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; }
  6. 6. CSS Preprocessors to the rescue! *.sass and *.scss
  7. 7. Big SASS Features● Code nesting! (less repetition)● Math & color manipulation● Variables!● Mixins! (functions) But you are still just writing CSS!
  8. 8. Code NestingSCSS Generated CSS#primary-nav { #primary-nav { display: block; display: block; padding: 10px; padding: 10px; } a { color: #1155CC; #primary-nav a { display: inline-block; color: #1155CC; padding: 5px 10px; display: inline-block; padding: 5px 10px; &:hover { } color: lightblue; } #primary-nav a:hover { } color: lightblue;} }
  9. 9. Variables & SuchSCSS Generated CSS$color-link: #1155CC; a {$color-link-hover: lighten($color-link,25%); color: #1155CC;$spacing: 5px; padding: 5px 10px; }a { color: $color-link; #primary-nav a:hover { padding: $spacing $spacing*2; color: #69ACF3; &:hover { } color: $color-link-hover; }}
  10. 10. Color Manipulation$myColor: #2A547E; //#2A547Esaturate($myColor, 20%); //#19548fdesaturate($myColor, 20%); //#3b546dlighten($myColor, 25%); //#5e94c9darken($myColor, 25%); //#1d3a58grayscale($myColor); //#545454complement($myColor); //#7e542ainvert($myColor); //#d5ab81$fadedColor: opacity($myColor, 0.7); //rgba(42, 84, 126, 0.3)transparentize($fadedColor, 30%); //rgba(42, 84, 126, 0.6)
  11. 11. Mixins (functions)Mixins SCSS@mixin rounded($radius) { #myElement{ -webkit-border-radius: $radius; @include rounded(5px); -moz-border-radius: $radius; @include opacity(80); border-radius: $radius; }}@mixin opacity($opacity) { Generated CSS opacity: $opacity / 100; #myElement{ filter: alpha(opacity=$opacity); -webkit-border-radius: 5px;} -moz-border-radius: 5px; border-radius: 5px; opacity: 0.8; filter: alpha(opacity=80); }
  12. 12. DEMO
  13. 13. More Mixins & Extensions bourbon.io compass-style.org
  14. 14. This is the last slide.CSS Preprocessors SASS ExtensionsSASS sass-lang.com compass-style.orgLESS lesscss.org bourbon.ioStylus learnboost.github.com/stylusVisual Studio Integration Learnings ● Mindscape Web Workbench sass-lang.com/tutorial.html ○ mindscapehq.com/products/web-workbench ○ free, but crippled. thesassway.com ● Web Tools ○ Newest update -2012.2 adds LESS support! ○ asp.net/vnext/overview/fall-2012-update
  15. 15. Just kidding, this is the last slide.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×