3 Steps to Make Better & Faster
Frontends
SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites
gem install haml
Variables$my-color: #ab42ef;
body { background: $my-color;}
Color Calculationsh1 { background: lighten($my-color, 23%); color: darken(#c24, 10%); border-color: desaturate(red, 50%);}
Color Functions★ opacify(color, amount)★ transparentize(color, amount)★ lighten(color, amount)★ darken(color, amount)★ saturate(color, amount)★ desaturate(color, amount)★ adjust-hue(color, degrees)★ mix(color1, color2, weight)★ grayscale(color)★ complement(color)
RGBA Colorsh2 { background: rgba(#00f, 0.7);}
R, G, B#hex
colorconst$variables
Cascadingh1 { color: red; a { color: blue; }}
Mixins@mixin my-style { background: red;}
.my-box { @include my-style;}
Mixin Parameters@mixin my-style($color: red) { background: darken($color, 5%);}
.my-box { @include my-style(#ff0);}
Cascading Mixins@mixin my-style { a { background: red; }}
.my-box { @include my-style;}
Extending.box { background: red;}
.bordered-box { border: 1px black solid; @extend .box;}
Result.box, .bordered-box { background: red;}
.bordered-box { border: 1px black solid;}
@extend=
inverse mixin
Alternative Syntax=my-style($color: red) background: darken($color, 5%)
.my-box color: red +my-style(#ff0) a, span color: blue *.sass
*.scss
More to Learn★ Include partials
(no asset packer needed)
★ Auto compress CSS files
★ @if, @for, @while syntax
★ “&” as current cascading placeholder
SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites
gem install compass
CSS3@import "compass";
.box { background: red; @include border-radius(4px); @include box-shadow( rgba(#ccc, 0.5), 3px, 3px, 5px));}
Helpersh1 { @include ellipsis; @include clearfix;}
a { @include hover-link;}
Frameworks@import "blueprint";
@include blueprint;
.box { @include column(3);}
★ Easy to extend with your own gem
★ Use other frameworks(960gs, suzy, YUI, YAML, jqTouch, …)
★ Write own frameworks
More to Learn
SCSS > DRY CSS
Compass > Simple CCS3
Lemonade > Easy Sprites
gem install lemonade
Simple Sprites.add { background: sprite-image("icons/pl.png");}
.remove { background: sprite-image("icons/rm.png");}
all icons by p.yusukekamiyamane.com (CC by 3.0)
Output.add { background: url("icons.png");}
.remove { background: url("icons.png") 0 -16px;}
Right Aligned.something { background: sprite-image("i/wide.png");}a.next { background: yellow no-repeat sprite-image("i/n.png", 100%); padding-right: 20px;}
Result.something { background: url("i.png");}a.next { background: yellow no-repeat url("i.png") 100% -20px; padding-right: 20px;}
Example link
Empty Space.add { background: sprite-image("icons/pl.png");}.remove { background: yellow no-repeat sprite-image("icons/rm.png"); padding: 20px;}
Could be Better.add { background: url("icons.png");}.remove { background: url("icons.png") 0 -16px; padding: 20px;}
Example link
Empty Space.add { background: sprite-image("icons/pl.png");}.remove { background: yellow no-repeat sprite-image("icons/rm.png", 0, 0, 20px); padding: 20px; }
Just Perfect.add { background: url("icons.png");}.remove { background: url("icons.png") 0 -36px; padding: 20px;}
Example link
Sprite Generation★ Sprite image named by directory:
“icons/*.png” > “icons.png”
★ Background position added only if needed
★ Add “no-repeat” by yourself:background: sprite-image("…") no-repeat;
Any questions?
Happy forking:http://github.com/nex3/haml
http://github.com/chriseppstein/compass
http://github.com/hagenburger/lemonade
Further reading:http://www.sass-lang.com
http://www.compass-style.org/docs/
http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html
Top Related