Sass: CSS with Attitude
Upcoming SlideShare
Loading in...5
×
 

Sass: CSS with Attitude

on

  • 1,826 views

 

Statistics

Views

Total Views
1,826
Views on SlideShare
1,821
Embed Views
5

Actions

Likes
2
Downloads
17
Comments
0

3 Embeds 5

http://twitter.com 2
https://twitter.com 2
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Sass: CSS with Attitude Sass: CSS with Attitude Presentation Transcript

  • Sass : CSS 011 ign w ith A s ttitu Berlin 2 al De de June Drup Camp 6 25+2 John Albin W @Joh ilkins nAlbihttp:/ n /www .flickr .com /phot os/phil yfn/5 5627 5594 3/
  • Why does CSS suck?
  • Why does CSS suck?★ Redundancy
  • Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
  • Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy
  • Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }
  • Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy
  • Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc;
  • Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc;
  • Why does CSS suck?★ Redundancy★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ Redundancy★ a { color: #cff; } .box { border-color: #cff; }★ Redundancy .box { -webkit-box-shadow: 1px 1px 10px 3px #ccc; -moz-box-shadow: 1px 1px 10px 3px #ccc; box-shadow: 1px 1px 10px 3px #ccc; }
  • Sass sucks less
  • Sass sucks less★ Sass is easy to learn: It is CSS + goodies
  • Sass sucks less★ Sass is easy to learn: It is CSS + goodies★ Browsers don’t understand sass
  • Sass sucks less★ Sass is easy to learn: It is CSS + goodies★ Browsers don’t understand sass★ Sass is compiled
  • .empty-rules {}// and comments
  • .empty-rules {} // and comments★ // Comments are not in rendered CSS
  • .empty-rules {} // and comments★ // Comments are not in rendered CSS★ /* Comments _are_ in rendered CSS */
  • .empty-rules {} // and comments★ // Comments are not in rendered CSS★ /* Comments _are_ in rendered CSS */★ .empty-rulesets {} // Not included.
  • nested { rules }
  • nested { rules }★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } }
  • nested { rules }★ .block { font-size: 12px; h2 { font-size: 18px; // Hell, yeah! } }★ .block { font-size: 12px; } .block h2 { font-size: 20px; }
  • nested { rules }
  • nested { rules }★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}
  • nested { rules }★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
  • nested { rules }★ #block-menu-block-main-menu-level-tertiary .content a:link {} #block-menu-block-main-menu-level-tertiary .content a:visited {} #block-menu-block-main-menu-level-tertiary .content a:hover, #block-menu-block-main-menu-level-tertiary .content a:focus {}★ #block-menu-block-main-menu-level-tertiary .content { a:link {} a:visited {} a:hover, a:focus {} }
  • nested { rules }
  • nested { rules }★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } }
  • nested { rules }★ .block { margin-bottom: 1.5em; &.last { // Last block in region margin-bottom: 0; } .body-class & { margin-bottom: 2em; } }★ .block { margin-bottom: 1.5em; } .block.last { margin-bottom: 0; } .body-class .block { margin-bottom: 2em; }
  • nested-properties
  • nested-properties★ border: 2px solid #333; border-left: 1px dotted #ccc;
  • nested-properties★ border: 2px solid #333; border-left: 1px dotted #ccc;★ border: 2px solid #333 { left: 1px dotted #ccc; // border-left top { width: 1px; // border-top-width } }
  • $variables
  • $variables★ $blue: #3bbfce; $default-font: Georgia, "Times New Roman", "DejaVu Serif", serif;
  • Math * 2
  • Math * 2★ $grid-width: 960px / 8;
  • Math * 2★ $grid-width: 960px / 8;★ Any of these: + - * / %
  • functions()http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
  • functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()
  • functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()★ HSL functions hsla(), lighten(), darken(), desaturate()
  • functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()★ HSL functions hsla(), lighten(), darken(), desaturate()★ Opacity functions opacify(), transparentize()
  • functions() http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html★ RGB functions rgb(), rgba(), mix()★ HSL functions hsla(), lighten(), darken(), desaturate()★ Opacity functions opacify(), transparentize()★ Make your own! ponycorn()
  • _Partials
  • _Partials★ Shared resources for your project.
  • _Partials★ Shared resources for your project.★ Name them with an underscore. Include them without an underscore.
  • _Partials★ Shared resources for your project.★ Name them with an underscore. Include them without an underscore.★ @include “partial”;
  • @ mixins
  • @ mixins★ #main { @include element-invisible; }
  • compile / watch
  • compile / watch★ sass sass/style.scss css/style.css
  • compile / watch★ sass sass/style.scss css/style.css★ sass --watch sass:css
  • FireSass
  • FireSass★ sass --debug-info --watch sass:css
  • Compass
  • Compass★ package manager
  • Compass★ package manager★ frameworks/groups of pre-built functionality
  • compass watch
  • compass watch★ The magic is in config.rb
  • compass watch★ The magic is in config.rb★ compass watch .
  • More Awesome
  • More Awesome★ Sass: http://sass-lang.com
  • More Awesome★ Sass: http://sass-lang.com★ Compass: http://compass-style.org
  • More Awesome★ Sass: http://sass-lang.com★ Compass: http://compass-style.org★ Zen 7.x-5.x