The
Palm
Civet

Posts tagged ruby

sass v. less

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.

compiling and sharing code, ideas, and tools for making better websites and applications.

by justin talbott {email me}

what is a palm civet?