Trying out CSS LESS

Posted on by jordanhaines

Ever since the talk about LESS and SASS I have always said straight up that I do not see the point really as CSS is a simple language that does what it is supposed to do, which is style a web page.

I recently read that Andy Clarke had the same thought and after trying it out is now converted, I had tried SASS and a few months ago was not impressed and still came to the same conclusion that I will stick to standard CSS.

LESS is more like SASS but all i needed to do was download less.js from there website, make a new style.less file and write away, Which I did and it worked very nicely.

So all you have to do in order to get started is include these two lines in your header.

<link rel=”stylesheet/less” type=”text/css” href=”styles.less”/>

<script src=”less.js” type=”text/javascript”></script>

Reading up on LESS I was interesting in a feature called Mixins. Mixins are a way to create a class and then be able to add that class to another class. Below is an example of what I had produced in my test site.


.roundedCorners {
border: 1px solid #2400ff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}

All you then have to do is add .roundedCorners to the element you want to target, for example

.headerWrapper { .roundedCorners; }

Now this does save you writing out the code all of the time, but is it really any easier then copy and paste?, I am still not convinced as the compiled version will write out all the .roundedCorners code anyway.

The next bit that I like was the ability to create variables at the top of the page to be used throughout the CSS, This comes in handy as you only have to change one line and the colour gets changed throughout the CSS file. Again though looking at the current way I do things, I use Coda to code my sites and it would its not to hard to use the find a replace function to change the colour in all instances of that colour that needs changing.

The example I created for myself to test LESS out had a CSS file length of 47 lines of code in total, when I compiled that it came to 89. So I get that I can write less so development of a site may be quicker, personally myself I have really OCD about the look of my code. The code that is compiled was not the best looking code I have seen, but maybe this is a trade off that I would have to make if I continue to use LESS in the future.

Now I know my test was very basic and I can see some of the advantages of LESS, but I am still the fence. I think over the Christmas break I will have to make a small but fully working site and go through the fully design and coding process to see if its any easier.

This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *