Codeharder

More than once in the past 6 months I have wanted variables, inheritance, and class chaining in CSS. I was never able to find something that did was I was looking for, and I thought about creating my own, but who has the time? Now I don’t have to, because yesterday I discovered .less.

With .less (pronounced dot-less) you write CSS as you are used to, but you can mix it up a bit to make things a little more clear and concise. For example, instead of having to duplicate the same hex color in a dozen or so selectors, you can define a variable as that color and just reference that.

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

If you want to chain your classes together you can simply include one in the other.

.rounded_corners {
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}


#header {
  .rounded_corners;
}


#footer {
  .rounded_corners;
}

You can nest your rules to make inheritance a little more clear.

#header {
  color: red;
  a { 
       font-weight: bold; 
       text-decoration: none; 
    } 
}

And lastly you can include some basic operators to give complex relationships to your properties.

@the-border: 1px;
@base-color: #111;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}


#footer { 
  color: (@base-color + #111) * 1.5; 
}

If that isn’t all, you can configure .less to cache and minify the output. Something I will be taking advantage of for sure.

asp.net webdev, css