• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Dev Conf - Sass, Compass &  the new Webdev tools
 

HTML5 Dev Conf - Sass, Compass & the new Webdev tools

on

  • 1,893 views

 

Statistics

Views

Total Views
1,893
Views on SlideShare
1,763
Embed Views
130

Actions

Likes
10
Downloads
52
Comments
1

3 Embeds 130

https://twitter.com 116
http://edydawsonwebdev.wordpress.com 13
http://www.linkedin.com 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

11 of 1 previous next

  • 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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • new in Sass 3.2 that was released only a few weeks ago\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

HTML5 Dev Conf - Sass, Compass &  the new Webdev tools HTML5 Dev Conf - Sass, Compass & the new Webdev tools Presentation Transcript

  • Dirk Ginader | Yahoo! Inc.Sass, Compass &the new Webdev tools @ginader
  • “CSS Precompilers areuseless. I don’t need them. I can write CSS myself.” -- me, early 2010
  • “CSS3 is awesome! Browserscan now do rounded corners and Everything!” -- me, about the same time
  • “Damn!writing all those Browser prefixes is tedious...” -- me, immediately afterwards
  • “WOAH! Livereload makes me forget about ⌘R!” -- me, mid 2011
  • http://livereload.com/
  • “The Web Developer Wonderland (a happy land where browsers dont need a Refresh button) CSS edits and image changes apply live.CoffeeScript, Sass, LESS and others just work.” -- the Livereload website
  • “What does LiveReload do?LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.Even cooler, when you change a CSS file or an image, thebrowser is updated instantly without reloading the page.” -- the Livereload website
  • writing 8 lines of CSS to create 1 simple crossbrowser gradient is a PITA... -- everybody, all the time
  • .box_gradient { // Old browsers background: black; // FF3.6+ background: -moz-linear-gradient(top, black 0%, white 100%); // Chrome,Safari4+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, white)); // Chrome10+,Safari5.1+ background: -webkit-linear-gradient(top, black 0%, white 100%); // Opera 11.10+ background: -o-linear-gradient(top, black 0%, white 100%); // IE10+ background: -ms-linear-gradient(top, black 0%, white 100%); // W3C standard background: linear-gradient(to bottom, black 0%, white 100%); // IE6-9 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=black,endColorstr=white,GradientType=0);}
  • wait a second...
  • http://incident57.com/codekit/
  • Codekit != Livereload• Does almost the same • BUT:• compiles all the CSS • it only auto reloads Preprocessors webkit browsers on your Mac (it controls• Lints your Javascript them using AppleScript• optimizes your Images • no Firefox or Opera• combo handles your CSS and Javascript • no mobile Devices ;-(
  • well if it’s *THAT* easy I could as well give it a try, right?me, after having seen this toggle countless times...
  • http://sass-lang.com/
  • “Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated towell-formatted, standard CSS using the command line tool or a web-framework plugin.” -- the Sass Website
  • $ gem install sass
  • $ sudo gem install sass
  • alright - let’s see what this can do...
  • Mixins!
  • reusable chunks of code/* style.scss */@mixin linear-gradient { background-image: linear-gradient(top, #444, #999);}.box-with-gradient { @include linear-gradient;}.another-box-with-same-gradient { @include linear-gradient;}
  • $ sass --watch style.scss:style.cssyou don’t need that thanks to Livereload :-)
  • $ sass --watch my/sass:my/cssyou don’t need that thanks to Livereload :-)
  • becomes/* style.css */.box-with-gradient { background-image: linear-gradient(top, #444, #999);}.another-box-with-same-gradient { background-image: linear-gradient(top, #444, #999);}
  • Mixins can have Params/* style.scss */@mixin linear-gradient($from, $to) { background-image: linear-gradient(top, $from, $to);}
  • /* style.scss */@mixin linear-gradient($from, $to){! // Old browsers! background: $from;! // FF3.6+! background: -moz-linear-gradient(top, $from 0%, $to 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, $from), color-stop(100%, $to));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, $from 0%, $to 100%);! // Opera 11.10+! background: -o-linear-gradient(top, $from 0%, $to 100%);! // IE10+! background: -ms-linear-gradient(top, $from 0%, $to 100%);! // W3C standard! background: linear-gradient(to bottom, $from 0%, $to 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! startColorstr=$from,! ! endColorstr=$to,GradientType=0! );}
  • /* style.scss */.box_gradient { @include linear-gradient(#444444, #999999);}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • /* style.scss */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient( HUH?! ! ! ! startColorstr=$from,! ! ! ! endColorstr=$to,GradientType=0! ! ! );}
  • http://dir.kg/sass.interpolation
  • /* style.scss */@mixin linear-gradient($from, $to){! // Old browsers! background: $from;! // FF3.6+! background: -moz-linear-gradient(top, $from 0%, $to 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, $from), color-stop(100%, $to));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, $from 0%, $to 100%);! // Opera 11.10+! background: -o-linear-gradient(top, $from 0%, $to 100%);! // IE10+! background: -ms-linear-gradient(top, $from 0%, $to 100%);! // W3C standard! background: linear-gradient(to bottom, $from 0%, $to 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! startColorstr=#{$from},! ! endColorstr=#{$to},GradientType=0! );}
  • /* style.scss */.box_gradient { @include linear-gradient(#444444, #999999);}
  • /* style.css */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=#444,! ! ! ! endColorstr=#999,GradientType=0! ! ! );}
  • /* style.css */.box_gradient{! // Old browsers! background: #444;! // FF3.6+! background: -moz-linear-gradient(top, #444 0%, #999 100%);! // Chrome,Safari4+! background: -webkit-gradient(linear, left top, left bottom,! ! ! ! ! color-stop(0%, #444), color-stop(100%, #999));! // Chrome10+,Safari5.1+! background: -webkit-linear-gradient(top, #444 0%, #999 100%);! // Opera 11.10+! background: -o-linear-gradient(top, #444 0%, #999 100%);! // IE10+! background: -ms-linear-gradient(top, #444 0%, #999 100%);! // W3C standard! background: linear-gradient(to bottom, #444 0%, #999 100%);! // IE6-9! filter: progid:DXImageTransform.Microsoft.gradient(! ! ! ! startColorstr=#444,! ! ! ! endColorstr=#999,GradientType=0! ! ! );}
  • write once and reuse/* style.scss */.box-with-gradient { @include linear-gradient(#444444, #999999);}.box-with-another-gradient { @include linear-gradient(#000, #fff);}
  • wait - I never have towrite prefixes again? Ever?
  • Ok. I’m convinced -what else do we have?
  • Nesting!
  • no more repetitive selector writing!/* style.scss */ /* style.css */#navbar { #navbar { width: 80%; width: 80%; height: 23px; height: 23px; } #navbar ul { ul { list-style-type: none; } list-style-type: none; } li { #navbar li { float: left; float: left; } a { font-weight: bold; } #navbar li a { } font-weight: bold; }}
  • even properties are nestable!/* style.scss */ /* style.css */.fakeshadow { .fakeshadow { border: { border-style: solid; style: solid; border-left-width: 4px; left: { border-left-color: #888; width: 4px; border-right-width: 2px; color: #888; border-right-color: #ccc; } } right: { width: 2px; color: #ccc; } }}
  • use the & (parent reference) i.e. for pseudoclasses/* style.scss */ /* style.css */a { a { color: #ce4dd6; color: #ce4dd6; } &:hover { color: #ffb3ff; } a:hover { &:visited { color: #c458cb; } color: #ffb3ff; } .module &{ a:visited { !color: red; color: #c458cb; } } .module a {} color: red; }
  • Variables!
  • define standard settings and reuse across your project/* style.scss */ /* style.css */ #navbar {$main-color: #ce4dd6; border-bottom-color: #ce4dd6;$style: solid; border-bottom-style: solid; }#navbar { a { border-bottom: { color: #ce4dd6; } color: $main-color; a:hover { style: $style; border-bottom: solid 1px; } }}a { color: $main-color; &:hover { border-bottom: $style 1px; }}
  • built in functions!
  • modify and transform/* style.scss */ /* style.css */$linkcolor: #ce4dd6; a { color: #ce4dd6; }a { a:hover { color: $linkcolor; color: #f0c9f3; } &:hover { a:active { color: lighten($linkcolor, 30%); color: #6b1a70; } } &:active { color: darken($linkcolor, 30%); }}
  • calculate!
  • Boundary of the content containerheight width margin padding border
  • the Box Model content area width + left padding + right padding + left border + right border = total box width
  • calculate the s**t out of the Box Model!/* style.scss */ /* style.css */ .box {$box-width : 100px; margin: 10px;$box-border : 3px; padding: 10px;$box-padding : 10px; border: 3px solid black;$box-margin : 10px; width: 74px; }.box{! margin : $box-margin;! padding : $box-padding;! border: $box-border solid black;! width : $box-width! ! ! - $box-border * 2! ! ! - $box-padding * 2;}
  • @import
  • @import?isn’t that in CSS already? Yes it is - but...
  • combine them instead ofloading one after the other! /* style.scss */ /* style.css */ .box { @import box-model; width: 74px; @import calculate; margin: 10px; } @import function; #navbar { width: 800px; } #navbar li { float: left; width: 150px; } a { color: #ce4dd6; } a:hover { color: #f0c9f3; } a:active { color: #6b1a70; }
  • http://compass-style.org/
  • “Compass is an open-source CSS Authoring Framework.” -- the Compass website
  • “Compass is an excellent set ofready made and well documentedCSS3 mixins, functions and helpers that make SASS more awesome” -- me
  • $ sudo gem update --system$ sudo gem install compass
  • $ cd <myproject>$ compass install bare$ compass watch
  • CSS3 mixins• Appearance • Flexbox• Background Clip • Box Shadow• Background Origin • Box Sizing• Background Size • Columns• Border Radius • Filter
  • CSS3 mixins• Font Face • CSS Regions• Hyphenation • Text Shadow• Gradients • Transform• Inline Block • Transition• Opacity
  • http://dir.kg/box.ftw
  • /* style.scss */.box{ $experimental-support-for-svg: true; @include background-image( !linear-gradient( !! left, !! #2ac363, #cd8c14, #9c4cc2 !) ); width: 80px; height: 80px;}
  • /* style.css */.box { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJhYzM2MyIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjY2Q4YzE0Ii8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjOWM0Y2MyIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #2ac363), color-stop(50%, #cd8c14), color-stop(100%, #9c4cc2)); background-image: -webkit-linear-gradient(left, #2ac363, #cd8c14,#9c4cc2); background-image: -moz-linear-gradient(left, #2ac363, #cd8c14,#9c4cc2); background-image: -o-linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); background-image: -ms-linear-gradient(left, #2ac363, #cd8c14,#9c4cc2); background-image: linear-gradient(left, #2ac363, #cd8c14, #9c4cc2); width: 80px; height: 80px;}
  • http://dir.kg/ultimate
  • http://csshat.com/
  • best practices built in/* style.scss */ /* style.css */.inline-box{ .inline-box {! @include inline-block; display: -moz-inline-box;} -moz-box-orient: vertical; display: inline-block; vertical-align: middle; *vertical-align: auto; } .inline-box { *display: inline; }
  • best practices built in/* style.scss */ /* style.css */.box{ .box {! @include clearfix; overflow: hidden;} *zoom: 1; }
  • best practices built in/* style.scss */ /* style.css */.other-box{ .other-box {! @include pie-clearfix; *zoom: 1;} } .other-box:after { content: ""; display: table; clear: both; }
  • helpers
  • did you *EVER* expect Sprites to be fun?@import "compass"; .icon-sprite, .icon-mail-attachment, .icon-mail-delete, .icon-mail-reply {@import "icon/*.png"; background: url(../images/icon-s10b2c68b42.png)@include all-icon-sprites; no-repeat; } .icon-mail-attachment { background-position: -26px -2771px; } .icon-mail-delete { background-position: -27px -2658px; } ...
  • @import "compass";$icon-spacing: 100px;$icon-position: 50%;@import "icon/*.png";.attachment{ @include icon-sprite(mail-attachment);}.delete{ @include icon-sprite(mail-delete);}.reply{ @include icon-sprite(mail-reply);}
  • @import "compass";$icon-layout: diagonal;@import "icon/*.png";.attachment{ @include icon-sprite(mail-attachment);}.delete{ @include icon-sprite(mail-delete);}.reply{ @include icon-sprite(mail-reply);}
  • .attachment{ .attachment { background: background: url(data:image/ inline-image( png;base64,iVBORw0KGgoAAAANSUh icon/mail-attachment.png EUgAAAA0AAAAOBAMAAAAGUYvhAAAAA ) no-repeat; 3NCSVQICAjb4U/gAAAAHlBMVEX///} 8AAAAAAAAAAAAAAAAAAAAAAAAAAAAA AAAAAACGjDitAAAACnRSTlMAESIzRF Vmd4iZu4Nz1gAAAAlwSFlzAAALEgAA CxIB0t1+/ AAAABR0RVh0Q3JlYXRpb24gVGltZQA 0LzQvMTI1uCR/ AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZS BGaXJld29ya3MgQ1M0BrLToAAAAFNJ REFUCJljYAACjWkCIIqpRSwBzDVgLg BxGwTEA0Bc9sAyMLdMPAHMTSxjhHKb GBg4DAvLOBQYGNQZ1EFcBg2gEJDLwG HAAuIyMJangg1nYARTACNTDXDO7nbI AAAAAElFTkSuQmCC) no-repeat; } ...
  • li{! padding-left: image-width( icon/mail-attachment.png ) + 10;! background-repeat:no-repeat;}
  • That’s nice and all butnow I can’t debug myCSS in the Inspector anymore, right?
  • FireSass for Firefox http://dir.kg/firesass
  • Sass-Sleuth for Webkits http://dir.kg/sass-sleuth
  • needs --debug-info /* config.rb */ sass_options = {:debuginfo => true}@media -sass-debug-info{filename{font-family:file:///Users/user/Documents/project/src/scss/_defaults.scss}line{font-family:00003213}}#x-main hr { height: 1px; margin: 36px 0; background-color: #e3e3e3; border: 0;}
  • please welcome the others:
  • please welcome the others:• Less: http://lesscss.org• Stylus: http://learnboost.github.com/stylus/
  • SASS ultimately won out because its the most mature, easiest to find information and help about, seems to have the most active and robustdevelopment, and has the least bugs. -- Chris Coyier, just recently http://css-tricks.com/musings-on-preprocessing/
  • thank you :-)•http://dir.kg/me•http://dir.kg/twitter•http://dir.kg/github•http://dir.kg/slidesWanna play with a the new toys?I’m looking for a new teammate!•http://dir.kg/job