Recently, the CSS tool like SCSS,SASS and less have become more popular.
Those framework provide several extra functionality to CSS, also with build in compress option.
take SCSS as example:
install scss using ruby gem:
gem install sass
sass style.scss style.css
sass [INPUT] [OUTPUT]
functions
1. Nesting class
#css{
padding:5px;
.tool{
padding-top:10px;
}
//parent reference
&:hover{
background-color:#FFF;
}
}
2.Variables
you can use dollar sign as variable mark in SCSS:
$mid-padding : 5px;
#css{
padding : $mid-padding;
}
3. Mixins
Mixins means module inheritance in Ruby. It's just like inheritance from abstract class in SCSS. Use @ sign for declare maxin and include in css class.
@mixin block-base($margin){
margin:$margin;
padding:$padding;
}
#block{
@include block-base(10px);
}
4. Inheritance
Also you can use @extend to inheritance from other CSS class.
.error{
color:#F43;
}
.big-error{
@extend .error
font-size: 22px;
}
5. import
Import can let you include library and mixins into current css file, like compass will have lots of library to import.
@import "compass/css3/border-radius";
@import "compass/utilities/general/clearfix";
Compass
Compass is another framework that integrate SCSS and CSS grid framework like blueprint,
that provide you build in CSS layout, ie hack and other support. Compass is well integrated with rails.
using compass:
gem install compass
compass init (under rails directory)
will create directory in app/stylesheets
compass compile
can compile into public/stylesheets directory
more reference for compass library