Who could ask for more with LESS CSS? (Part 1 of 3–Features)

It wasn’t very long ago that I first began to get into CSS precompilers such as SASS (Syntactically Awesome Stylesheets) and LESS (The Dynamic Stylesheet Language) and I had been hooked on the idea since.  When I finally had a new project come up, I leapt at the opportunity to try out one of these languages.

Introduction

To be honest, I was hesitant at first to add either framework as I didn’t really know much more than what I had read on their homepages, and I didn’t like the idea of adding too much complexity to a project - I couldn’t guarantee I would be the only person to support it in the future.

Thankfully, both of these languages just add things into CSS.  You don’t HAVE to know LESS or SASS to do anything, you can still do your old school CSS, and your output will be the same.  However, when you want to start doing more advanced things such as variables, mixins, and color functions, the functionality is all there for you to utilize.

From what I had read, SASS has a few more features than LESS, which is why I initially tried to figure out how to incorporate it into a MVC 4 project. However, through my research, I couldn’t find a way to accomplish this without including some bit of the Ruby on Rails framework on the computer running it, and I hated the fact that I had to do that.  Besides SASS, there is little chance of me getting into the RoR framework, at least in the next couple years.  So in the end, I settled with using LESS.

Features

So, what can LESS (or SASS) do for you?  There are several reasons I have come to love it in the past few weeks.

1 – Constants

Using LESS, you can finally declare a constant and use its value across an entire CSS file. The case that most people would be familiar with is colors.  Wanting to declare one or two color variables that comprise the theme of the site, and not have to retype out their specific hex code each time, but rather a variable name.  What’s great about this is that if you end up having to change it, you only have to change it in one place. 

An important thing to note is that you aren’t limited to creating constants just for colors, but for strings and measurements as well.

2 – Inheritance

This is a cool feature in my mind for simplicity and organization.  Both LESS and SASS allow you to place selectors within other selectors, and when it is compiled, the languages will break the rules out as necessary and keep the inheritance chain you created in the selectors.

Example LESS Code:


#header {
  h1 {
    font-size: 26px;
    font-weight: bold;
  }
  p {
    font-size: 12px;
    a
    {
      text-decoration: none;
      &:hover {
        border-width: 1px
      }
    }
  }
}

Example Compiled CSS:


#header h1
{
  font-size: 26px;
  font-weight: bold;
}
#header p
{
  font-size: 12px;
}
#header p a
{
  text-decoration: none;
}
#header p a:hover
{
  border-width: 1px;
}

3 - Mixins

Mixins are where languages like this really shine.  The ability to mixin other definitions setup a parametric mixin.  There is really a lot of content in this area, so I would suggest looking at http://lesscss.org for more information.  One of the things I would suggest if you do begin to use LESS is to also grab the mixins.less file from the Twitter Bootstrap project.  This file already has a bunch of predefined mixins for things like border-radius with all of the browser specific prefixes.  This alone is of great use!

4 – Color Functions

This is the last thing I wanted to point out as my final post in this series will be utilizing these functions in a more drawn out manner.  Both LESS and SASS provide functions for getting information from a color (R,G,B,H,S,L).  Using these, it is easy to define a primary color, and then darken or lighten it a little for your needs.  Example:

Example LESS Code:

@base-color: #111;
@red:        #842210;

#footer {
  color: (@base-color + #003300);
  border-left:  2px;
  border-right: 2px;
  border-color: desaturate(@red, 10%);
}

Example Compiled CSS:

#footer {
   color: #114411;
   border-left:  2px;
   border-right: 2px;
   border-color: #7d2717;
}

I have found that these can be very useful and powerful when constructing a site theme.

Conclusion

I came across LESS and SASS when looking for the best way to implement some type of CSS variables for colors, because I hated having to do a Find and Replace in all of the files using the colors, and in some instances, you couldn’t just find/replace because of the color choices interfering with other colors (color to replace of #000, yet come colors existed like #0002bc).  So in many cases I would end up having to do a Find and manually check each one.

In my next post, I am going to cover how I’ve come to set up these items and the structure for the items in the project, as well as the conventions that I have come to start using.  In the final post in the series, I will cover a neat little side project I built in LESS dealing with colors!

Print | posted on Monday, November 26, 2012 4:51 PM

Feedback

# re: Who could ask for more with LESS CSS? (Part 1 of 3–Features)

left by Travis at 11/26/2012 11:08 AM Gravatar
Also, make sure you check out http://www.dotlesscss.org/ if your a .NET developer

# re: Who could ask for more with LESS CSS? (Part 1 of 3–Features)

left by Kris at 11/26/2012 10:01 PM Gravatar
Please clear some points in your post.

"I leapt at the opportunity to try out one of these languages". These things are pre-processor not a language.

# re: Who could ask for more with LESS CSS? (Part 1 of 3–Features)

left by ToString(theory); at 11/26/2012 10:18 PM Gravatar
Travis - Yep, actually my next post will be on integrating LESS into MVC 4 through the use of dotless. If you miss that part, be sure to at least see part 3! I think it is pretty cool, however I'm probably bias towards it!

Kris - This could be clearer, I am sorry. LESS and SASS themselves are able to coexist perfectly with CSS with no problem, however on their website they are referred to as languages.. This is because they do add in language elements that don't exist in CSS such as mixins, constants, and functions. However I should have been clearer in stating that there needs to be a preprocessor that processes that part of the language before it will be understood... Both LESS and SASS claim to degrade if not preprocessed to function as CSS, however in places where parts of the extension languages are used, the browser will usually drop/ignore those definitions entirely.

So - LESS and SASS are languages (it even says so on their pages), however they are preprocessed to regular CSS to function correctly by use of one of their utilities. In my next post I will be covering using LESS in MVC4. Any other questions?

# re: Who could ask for more with LESS CSS? (Part 1 of 3–Features)

left by Mark Rendle at 11/27/2012 4:51 AM Gravatar
Did you look at SassAndCoffee, by Paul Betts? I don't know if it works with MVC 4, but it was great in MVC 3.

# re: Who could ask for more with LESS CSS? (Part 1 of 3–Features)

left by ToString(theory); at 11/27/2012 8:14 PM Gravatar
Yes, I had seen SassAndCoffee... I think at the time I stayed away from it because I still believed that you had to install the ROR framework to get anything with SASS working... I now believe I may have misunderstood. I do believe that what I think I may have misunderstood is that to use Compass, which I really wanted to be able to use with SASS. But yes, SassAndCoffee would work in MVC4.
Post A Comment
Title:
Name:
Email:
Comment:
Verification: