CSS preprocessors
Upcoming SlideShare
Loading in...5
×
 

CSS preprocessors

on

  • 597 views

 

Statistics

Views

Total Views
597
Views on SlideShare
597
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs LicenseCC Attribution-NonCommercial-NoDerivs License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS preprocessors CSS preprocessors Presentation Transcript

  • 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 the only (CSS is the only style sheet language listed on Wikipedia)
  • 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 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;} }
  • 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; }}
  • 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)
  • 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); }
  • DEMO
  • More Mixins & Extensions bourbon.io compass-style.org
  • 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
  • Just kidding, this is the last slide.