the farther down the javascript and ruby paths i have journeyed, the more frustrated i have been with the limits of css.
in my hunt for greater control, i first came across sass, the ruby-based flexible short-hand css templating system about 6 months ago. it has support for constants, ‘mixins’ or sets of attribute/value pairs, nested rules, and variable/attribute operations. a simple example should help explain =>
!main_color = #00ff00
#main
:color = !main_color
:p
:background-color = !main_color
:color #000000
this .sass file would compile to =>
#main { color: #00ff00; }
#main p { background-color: #00ff00; color: #000000; }
as you can see, the syntax contains no curly brackets and relies on indentation for organization. however, that doesn’t jive with the live preview in css edit which i have grown to love, so i never gave it a chance.
recently less became the new kid on the blcok. at first glance, it looked like it is was only re-inventing the sass wheel in terms of features, but there is a key difference: less preserves the curly bracket syntax of css, which makes migrating between less and css totally simple. here is an example =>
@ox_blood: #460000;
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners;
color: @ox_blood;
p {
.rounded_corners;
color: @ox_blood + #111;
}
}
which spits out css of =>
#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #460000;
}
#header p {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
color: #571111;
}
less is still brand new and my first few attempts to turn my existing reset & base stylesheet ran into compilation errors. regardless, i have high hopes for this project. i am looking forward to doing some css edit live preview brainstorming, and turning that existing code into less and smarter code.