Using the LESS CSS Preprocessor for Smarter Style Sheets

Advertisement

As a Web designer you’re undoubtedly familiar with CSS, the style sheet language used to format markup on Web pages. CSS itself is extremely simple, consisting of rule sets and declaration blocks—what to style, how to style it—and it does pretty much everything you want, right? Well, not quite.

You see, while the simple design of CSS makes it very accessible to beginners, it also poses limitations on what you can do with it. These limitations, like the inability to set variables or to perform operations, mean that we inevitably end up repeating the same pieces of styling in different places. Not good for following best practices—in this case, sticking to DRY (don’t repeat yourself) for less code and easier maintenance.

Enter the CSS preprocessor. In simple terms, CSS preprocessing is a method of extending the feature set of CSS by first writing the style sheets in a new extended language, then compiling the code to vanilla CSS so that it can be read by Web browsers. Several CSS preprocessors are available today, most notably Sass131 and LESS2.

3

What’s the difference? Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to your current CSS code. This means you can use it right away with your existing code. Recently, Sass also introduced a CSS-like syntax called SCSS (Sassy CSS) to make migrating easier.

If It Ain’t Broke…?

By now you might be thinking, “So what? Why should I care about these things, and how exactly will they make my life as a Web designer easier?” I’ll get to that in a moment, and I promise it will be worth your time. First, let me clarify the focus of this article.

In this tutorial, I’ll be using LESS to demonstrate how CSS preprocessing can help you code CSS faster. But that doesn’t mean you must use LESS. It’s my tool of choice, but you may find that Sass fits your workflow better, so I suggest giving them both a shot. I’ll talk a bit more about their differences at the end of the article.

I’ll start off by explaining how LESS works and how to install it. After, I’ll list a set of problems that large CSS files pose, one by one, and exactly how you can use LESS to solve them.

Let’s go!

Installing It

There are two parts to any CSS preprocessor: the language and the compiler. The language itself is what you’ll be writing. LESS looks just like CSS, except for a bunch of extra features. The compiler is what turns that LESS code into standard CSS that a Web browser can read and process.

Many different compilers are actually available for LESS, each programmed in a different language. There’s a Ruby Gem4, a PHP version5, a .NET version6, an OS X app7 and one written in JavaScript8. Some of these are platform-specific, like the OS X app. For this tutorial, I recommend the JavaScript version (less.js) because it’s the easiest to get started with.

Using the JavaScript compiler is extremely easy. Simply include the script in your HTML code, and then it will process LESS live as the page loads. We can then include our LESS file just as we would a standard style sheet. Here’s the code to put between the <head> tags of your mark-up:

<link rel="stylesheet/less" href="/stylesheets/main.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>

Note that I’m referencing the less.js script directly from the Google Code server. With this method, you don’t even have to download the script to use it. The style sheet link goes above the script to ensure it gets loaded and is ready for the preprocessor. Also, make sure that the href value points to the location of your .less file.

That’s it. We can now begin writing LESS code in our .less file. Let’s go ahead and see how LESS makes working with CSS easier.

1. Cleaner Structure With Nesting

In CSS, we write out every rule set separately, which often leads to long selectors that repeat the same stuff over and over. Here’s a typical example:

#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}

LESS allows us to nest rule sets inside other rule sets, as a way to show hierarchy. Let’s rewrite the above example with nesting:

# header {
  #nav {
    ul {
      li {
        a {}
      }
    }
  }
}

I’ve omitted the content from the selectors for simplicity, but you can see how the structure of the code quickly changes. Now you don’t have to repeat selectors over and over again; simply nest the relevant rule set inside another to indicate the hierarchy. It’s also a great way to keep code organized because it groups related items together visually.

Also, if you want to give pseudo-classes this nesting structure, you can do so with the & symbol. Pseudo-classes are things such as :hover, :active and :visited. Your code would look as follows:

a {
  &:hover {}
  &:active {}
  &:visited {}
}

2. Variables For Faster Maintenance

We usually apply a palette of colors across an entire website. Any given color could be used for multiple items and so would be repeated throughout the CSS code. To change the color, you’d have to do a “Find and replace.”

But that’s not quite it. You could also isolate those values into separate rule sets; but with this method, the rule sets would keep growing as you add more colors across the website, leading to bloated selectors. Here’s what I’m talking about:

#header, #sidebar .heading, #sidebar h2, #footer h3, .aside h3 { color: red; }

To make a simple color change, we’re faced with long selectors, all dedicated to that one color. It’s not pretty. LESS allows us to specify variables in one place—such as for brand colors, border lengths, side margins and so on—and then reuse the variables elsewhere in the style sheet. The value of the variable remains stored in one place, though, so making a change is as simple as changing that one line. Variables start with an @ and are written like this:

@brand-color: #4455EE;

#header { background-color: @brand-color; }
#footer { color: @brand-color; }
h3 { color: @brand-color; }

In LESS, variables also have scope, so you could use variables with the same name in various places; when they’re called, the compiler would check for the variable locally first (i.e. is there anything with that name where the declaration is currently nested?), and then move up the hierarchy until it finds it. For example, the following code:

@great-color: #4455EE;

#header {
  @great-color: #EE3322;
  color: @great-color;
}

…compiles to:

#header { color: #EE3322; }

3. Reusing Whole Classes

Variables are great, but we often reuse more than single values. A good example is code that’s different for every browser, like the CSS3 property border-radius. We have to write at least three declarations just to specify it:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

If you use a lot of CSS3, then this sort of repeating code adds up quickly. LESS solves this by allowing us to reuse whole classes simply by referencing them in our rule sets. For example, let’s create a new class for the above border-radius and reuse it in another rule set:

.rounded-corners {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
#login-box {
  .rounded-corners;
}

Now #login-box will inherit the properties of the rounded-corners class. But what if we want more control over the size of the corners? No problem. We can pass along variables to the “mixin” (these reusable classes are called mixins) to get a more specific outcome. First, we rewrite the original mixin to add the variable we want to manipulate:

.rounded-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

Now we’ve replaced the values for a variable, and we’ve specified the default value inside the parentheses. To give mixins multiple values, you’ll just need to separate them with a comma. Now, if we want our #login-box to have a border radius of three pixels instead of five, we do this:

#login-box {
  .rounded-corners(3px);
}

4. Operations

Variables let us specify things such as common palettes of colors, but what about relative design elements, like text that’s just a bit lighter than the background, or an inner border that’s one pixel thicker than the outer border?

Rather than add more variables, we can perform operations on existing values with LESS. For example, we can make colors lighter or darker or add values to borders and margins. And when we change the value that these operations depend on, they update accordingly. Take the following:

@base-margin: 25px;
#header { margin-top: @base-margin + 10px; }

This gives the #header element a top margin of 35 pixels. You can, of course, also multiply, divide and subtract, and perform operations on colors like #888 / 4 and #EEE + #111.

5. Namespaces and Accessors

What if you want to group variables or mixins into separate bundles? You can do this by nesting them inside a rule set with an id, like #defaults. Mixins can also be grouped in this way:

#defaults {
  @heading-color: #EE3322;
  .bordered { border: solid 1px #EEE; }
}

Then, to call a variable and a mixin from that particular group, we do this:

h1 {
  color: #defaults[@heading-color];
  #defaults > .bordered;
}

We can even access values of other properties in a given rule set directly, even if they’re not variables. So, to give the sidebar heading the same color as your main h1 heading, you’d write:

h1 { color: red; }

.sidebar_heading { color: h1['color']; }

There’s not much difference between variables and accessors, so use whichever you prefer. Accessors probably make more sense if you will be using the value only once. Variable names can add semantic meaning to the style sheet, so they make more sense when you look at them at a later date.
A couple more things to mention: You can use two slashes, //, for single-line comments. And you can import other LESS files, just as in CSS, with @import:

@import 'typography';
@import 'layout';

To Conclude

I hope by now you’ve got a pretty good idea why CSS preprocessors exist, and how they can make your work easier. The JavaScript version of the LESS compiler, less.js, is of course just one way to use LESS. It’s probably the easiest to get started with, but it also has some downsides, the biggest one being that the compiling takes place live. This isn’t a problem on modern browsers with fast JavaScript engines, but it might work slower on older browsers. Note that less.js actually caches the CSS once it’s processed, so the CSS isn’t regenerated for each user.

To use the generated CSS instead of LESS in your markup, you can compile your files using the various other compilers. If you’re on OS X, I suggest trying out the LESS App9, a desktop app that watches your LESS files for changes as you work and automatically compiles them into CSS files when you update them. The Ruby Gem has the same watcher functionality but is trickier to install if you’re not familiar with Ruby (see the official website10 for details on that). There are also PHP11 and .NET12 versions.

Finally, LESS isn’t your only option for a CSS preprocessor. The other popular choice is Sass131, but there are still more options to check out, such as xCSS14. The advantage of LESS is that it uses existing CSS syntax, so getting started is just a matter of renaming your .css file to .less. This might be a disadvantage if you dislike the CSS syntax and curly braces, in which case Sass would probably be a better choice. There is also the Compass15 framework available for Sass, which is worth checking out if you go with Sass.

(al) (sp)

Footnotes

  1. 1 http://sass-lang.com/
  2. 2 http://lesscss.org/
  3. 3 http://lesscss.org/index.html
  4. 4 http://lesscss.org/
  5. 5 http://leafo.net/lessphp/
  6. 6 http://www.dotlesscss.org/
  7. 7 http://incident57.com/less/
  8. 8 http://github.com/cloudhead/less.js
  9. 9 http://incident57.com/less/
  10. 10 http://lesscss.org/
  11. 11 http://leafo.net/lessphp/
  12. 12 http://www.dotlesscss.org/
  13. 13 http://sass-lang.com/
  14. 14 http://xcss.antpaw.org/
  15. 15

↑ Back to topShare on Twitter

Dmitry Fadeyev is the creator of Usaura, a micro usability testing service, and the founder of UsabilityPost, a blog about good design and user experience. Additionally, you can read his thoughts on design, art and practical philosophy over at his personal blog.

Advertising
  1. 1

    Interessting, but doesn’t get me at all.

    6
  2. 2

    I’ve seen LESS referenced a couple times recently. I’m obviously not getting it:

    Why would I relearn how to write CSS just so I can push it through a compiler that returns the CSS I would have written in the first place?

    6
  3. 3

    Because sometimes you just have to use the same values (colors, margins, border-radius) so many times in one stylesheet it would save a lot of time if you could use variables and such. If you’ve just read the entire post and don’t see the benefits you haven’t written enough CSS yet :P

    9
  4. 4

    SASS introduced a new CSS – like syntax, called SCSS, so it’s not really fair to say that LESS has that advantage.

    Plus, Compass is really cool, so in my opinion, it’s better to go with SASS over LESS, if just because of Compass.

    6
  5. 5

    Looks nice, good idea :)

    2
  6. 6

    I tried LESS a few days ago for the first time and I really love it. The Textmate bundle comes pretty handy to auto-compile on save.

    6
  7. 7

    Nice post, I’m really starting to think it may be worth it to try this out… But please do fix the ‘top-margin:’ part in the Operations chapter. Should be ‘margin-top:’ of course :P

    3
  8. 8

    There’s no re-learning here. If you can write css you can write less. Less has a much more logical syntax which means it’s much easier to read your css when you come back to it after 6 months or so.

    0
  9. 9

    great monday morning read.
    Question about

    rounded(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }

    Shouldn’t it read

    rounded-corners(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }

    Or am I missing something?

    2
  10. 10

    Personally I’m not a huge fan of the JS implementation of Less as it’s still in heavy development, some of the stuff from Less ruby aren’t implemented or working in Less.js, I’ve also found it can clash pretty badly with other JS scripts.

    Instead I use http://drupal.org/project/less as I mostly work with Drupal, it handles all complilation and allows your .less file to be included within your theme as you would any other css.

    There are plenty of options out there for the automated compilation of less files.

    2
  11. 11

    Doesn’t matter what you name the mixin

    1
  12. 12

    I’m not comfortable with LESS
    OOPS is good. BUT! also create dependable, shared variables.

    For real time production sites, if a urgent css/layout bug pop up &
    to fix that fast
    this approach gonna take more time. Isn’t it ?

    Straight css approach don’t take much time to cool down the fire.

    Comments ?

    0
  13. 13

    Very interesting article. I want to start playing around with less now.

    0
  14. 14

    Javascript wouldnt be usefull right, since there is still a fair amount of people who have got javascript turned off.. And this will break your website

    Did fiddle arround with LESS a while ago but for the sites i build straight CSS is way to go and less time consuming for me personal!

    3
  15. 15

    Great post. Mind this though: using less CSS or similar makes it harder debugging using Firebug and other tools.

    0
  16. 16

    Sounds Interesting!! I’ll try it out.. thanks

    0
  17. 17

    I’ve been using LESS for more than 6 months and I found out that it’s quite easy to make your css actually worse. The nested structure is really nice for developing, but it has one drawback if not used correctly: it makes your css bigger.

    Let’s take the first example in this articles:
    #header #nav ul li a {}
    nice right? well, without LESS it would probably have been
    #nav li a {}
    or sometimes even
    #nav a

    Of course the problem is not with LESS itself, because you could obtain the same result. However, LESS makes structure really easy to use, so you might end up abusing them without even realizing.
    You’ll have to find a good trade-off between nice structures and small (and not over-specific) CSS.

    1
  18. 18

    What will happened if JavaScript is Disabled ?

    I know that people disabling JS are very small percentage but in normal situations when JS is disabled what will be affected are sliders , widgets & other stuff that if you write a good CSS it will degrade gracefully “scrollbars,etc..”.

    But in this case what will happened casue browsers won`t be able to read .less stylesheets ? will it be just a plain HTML page ?

    3
  19. 19

    Mark and Martin S. hit two of the problems on the head.

    I get quite worried when JS is relied on for CSS to style correctly. I saw the other options apart from JS but then brings us to debugging. If you cannot debug the code easily then development time and handovers must be taken into consideration.

    I can hand-over my CSS to any dev and they can work from it. With this everyone would have to learn how it works.

    I like the concept but there are too many downsides to consider…

    0
  20. 20

    lol…the nicer the waitress, the more suspicious I am of foul play.

    0
  21. 21

    I’ve been using LESS for 3 months myself, and what I usually do is code/cut up my sites with LESS first, compile it when it’s ready to go live, then I remove the non-necessary code like you just explained. Even with all of that it takes me 300% less time to cut up a site, so I am extremely happy to use LESS.

    It’s always up to the person coding to make sure the CSS isn’t bloated. PageSpeed for firebug is a great way to check, and it tells you specifically which lines have more bloat then needed.

    All in all, I am a LESS user for life! haha http://twitter.com/TheCSSGuru

    ~ Chris

    2
  22. 22

    What about JavaScript disabled browsers? How does it depreciate? I could also see this creating some debugging nightmares. It’s adding two additional variables to a workflow, compiling and javascript processing. The beauty of a lot of web technologies is that there is no compiling. And running that much code through a JS processor sounds like a 1st grader mistake. The benefits are just not enticing enough for me.

    0
  23. 23

    I think people are reading this article incorrectly.

    The LESS.js just gives you an in browser compiler when coding your LESS.

    After you are done with writing your LESS you will want to compile it to CSS and make that new CSS file the live version. You will have your LESS copy on your machine, not the live one for the world to view.

    ~ Chris

    5
  24. 24

    Actually I think it would be more accurate to say: “…if you’ve learned css AND some scripting (JavaScript or PHP) than you don’t have to learn anything.”

    I don’t recall variables and namespaces used in either HTML or CSS.

    In either case this is a really cool additions to CSS. I love the nested selectors and variables and I wonder why they can’t just be implemented as part of the CSS spec in general.

    3
  25. 25

    I recommend the use of the Less-App http://incident57.com/less/ .
    It automatically compiles your Less-Style-Sheet to CSS on your own computer after saving.

    Compiling online is to time-consuming for users with JS and dangerous for people with JS disabled.

    0
  26. 26

    really? won’t it render in the browser the way the browser renders all CSS?

    0
  27. 27

    Is CSS validation still important today ?

    Because i’m not sure this would validate according to the w3c css validator.

    But still it looks very interesting !

    0
  28. 28

    Variables alone make LESS worth using. It’s a crime that CSS core doesn’t have such a basic staple of design. Anything that eliminates cludge from the web design process without impacting the end user is worth investigating.

    0
  29. 29

    I like the idea behind it but I always refrain from using such things. By the time you’re finished making your CSS all fancy with such plugins, I’ve already written all of the stylesheets and have moved on.

    0
  30. 30

    Sometimes I agree with you Daryn, the “#header #nav ul li a {}” is just wrong on so many levels. Why not just write #nav a. It’s better. Less is somewhat nice, but it make us add a lot of extra code to our styles.

    0
  31. 31

    Yes, but your less css and the compiled css is (of course) not the same. For example, using Firebug to find the right line is no longer possible.

    0
  32. 32

    I love the idea of LESS and other preprocessors like it but have never really enjoyed the outcome. Sometimes people, and developers especially, tend to forget that there are people out there not pulling down content at 700k+ a second or who are still using some old 1.3ghz celeron and IE6. Above looks and ease of use in the code I always place speed first. It does me no good to write larger files to be compiled at runtime for the masses. Speed is always an issue; and I don’t think I’m wrong on that.

    1
  33. 33

    As always someone took something so simple like CSS and decided to add codes and linked scripts to make it better. This is only going to make CSS evil. As mentioned above, if it an’t broke – don’t fix it.
    All this is going to do is muck up current standards and increase cross-browser incompatibility. Let’s keep it simple and stick with a system that isn’t broken yet.
    Keep in mind that a lot of companies and people still turn javascript support off by default.

    -3
  34. 34

    LESS.js is for development of your CSS. NOT for live use. That is why you COMPILE it to CSS. Using the .js helps you when you start. KEEP the less file and make edits later down the road, but ALWAYs compile to CSS for live. Clean up the code bloat a little, and now you have happy viewers no matter their speed. It’s simple. Understanding that fact is not hard.

    8
  35. 35

    I can’t see why I’d want to use this. It seems to be a solution for something that isn’t actually a problem.

    0
  36. 36

    i use less everyday. it’s so powerful. i can’t imagine going back now…

    it’s also great for combining multiple css files…

    3
  37. 37

    It’s not a solution for fixing CSS, it’s a way to write it. That’s it. A way to write it. It’s not ment to fix CSS. SASS isn’t ment to fix CSS. It’s just a way to accomplish the same goal, but in a different manner. IT’S NOT SUPPOSE TO FIX CSS. Come on people, use your brains =P

    5
  38. 38

    Nice Article !! I’ll try it out.. thanks

    0
  39. 39

    Could you then directly edit the CSS on the fly? and if so, would it mess things up if you went back to use the compiler afterward?

    0
  40. 40

    Burak Yiğit Kaya

    December 6, 2010 7:41 am

    It really is a shame not mentioning the server side JS support via Node.js. I have used LESS on a very large and ugly CSS file to convert it into a clean, managable chunk and guess what: it worked brilliantly.

    Some mention debugging problems about compiling on the server side but the compiled code is completely legible and thus debuggable. And for production, when you run YUI Compressor over the LESS output, you get yourself a holy mixture =)

    2
  41. 41

    If you are at the point of editing the css, then the LESS file should no longer come into play because you are editing your compiled file. There isn’t a way to have the edited CSS go back to your LESS. If you are the only person working on the CSS and you have the original LESS, just make the change in the LESS and recompile the CSS and upload from there.

    2
  42. 42

    I tried less on a big project, and had to switch back to normal CSS about half way through. It’s an interesting concept, but I found it really annoying to have to constantly compile my .less file in order to see the CSS changes. That, and the resulting CSS file was formatted in ‘longhand,’ which wasn’t friendly for continuing development.

    0
  43. 43

    Haven’t given it a try yet, but it seems the nesting ends up compiling not only big but also inefficient css by overly qualifying with tags.

    0
  44. 44

    Compiling the CSS is very easy and takes no longer than just a “save” in your LESS file. Were you working locally, then uploading a CSS file to your server? In which case, yes it will take you longer. If you find yourself taking more time to compile, then use the LESS.js to view your changes in the browser itself, and once satisfied, compile it as CSS and use that as your final version.

    As far as formatted in ‘longhand’ this is only the case for the way it selects, not the actual properties like margin, padding, ect. Meaning your #nav a is a #nav li a. This is called code bloat, that LESS outputs so that the structure is maintained. This is easily resolved by the user if they so choose, just delete the unnecessary code in your CSS, it may take you 2 extra seconds, but you only have to do it once, if you choose too.

    LESS is optional. Period. Either you use it because it makes you faster, or you don’t because it has slowed you down some how.

    5
  45. 45

    I’ve always wished normal CSS was structured this way…
    I definitely have to try this.

    0
  46. 46

    Add to that the fact that Sass/SCSS is much more actively developed than LESS.

    1
  47. 47

    it’s good to use those handy features, but..what’s the diference between this and programming a .php file which returns a css file (well..this is what i do since 2 years ago) ?

    0
  48. 48

    100% agree. Compass gives Sass an extreme edge for the import modules. Thank godd for the CSS3 import that makes the font-face, border-radius, box-shadow, etc. available.

    4
  49. 49

    Semantics do matter. This isn’t really a ‘compiler,’ but rather an interpreter. And in laymans terms…. “you write css according to the syntax of Less and then Less interprets that to regular css which you actually use for your sites”

    1
  50. 50

    Never heard of CSS pre-processing before.

    I’d say it’s more than interesting. I’ll definitely try LESS over the next days. I wish W3C could update the CSS3 draft with all these time-savers.

    0
  51. 51

    For some reason I am always amazed to read the number of comments where people are unwilling to even try these out. Use it first, and then come back and say it isn’t worth it. I’ve been using Sass now for about 6 months, with the past 3 being that is all I use on my projects.

    As stated above by a commenter, Sass and LESS do not FIX CSS. It makes writing it faster. If you use Compass, which compiles the Sass into CSS for you, it will also minify it for you or output it into several other formats (single line, block, whatever).

    The complaint of complicating the CSS is silly as well. Cross-browser compatibility is a non-issue as well. If you are writing good CSS to begin with, then you are not all of a sudden going to write it using Sass or LESS that screws up browsers.

    Writing my styles in Sass (along with Compass) takes me half the time now. Writing straight CSS now seems tedious. Seriously, just try Sass or Less for a couple of hours (not asking much) and you will be able to make an informed desicion. You are not learning a new language, just a new way of writing your CSS that will save you time.

    I’m not sure what the hold up is for some people to try something new that could decrease development time and improve your process. I am always into trying something that could improve how I develop my sites, and Sass has done.

    3
  52. 52

    While I love the ability to reduce redundancy in code (especially when adding all the CSS3 cross-browser code) I was struck that one cannot use @font-face or @media queries at the moment so I am getting a plus on the one hand and a big negative on the other. For the moment I won’t be using LESS. Great article.

    0
  53. 53

    That was my question too. It seems the LESS compiler actually in some cases creates worse CSS than I would have written, and I’m not sure it really does save time when there are post-production issues like not being able to use Firebug for debugging, not being able to use it for sites that combine coding strategies (Ruby, javascript and PHP), and the learning curve required for the team to share it. I can see the benefit for sites that co-brand for partners or need to offer themes and skins, but for the rest of us, I feel like this tool is halfway there. This was an excellent lesson on how to use it, though. It’s good to know that it’s available.

    2
  54. 54

    I have also gone with LESS and it is really new to me. But it is really good

    3
  55. 55

    While it’s true that LESS doesn’t support @media queries as of yet, it does in fact work with @font-face. Cloudhead said that LESS.js version 2.0 will support @media queries, and a whole slew of things that make me giggle with excitement, lol (tmi I know) haha.

    Bookmark the github for LESS: https://github.com/cloudhead/less

    ~ Chris

    0
  56. 56
  57. 57

    Great article, I’ve never heard of LESS before looks good. I’m big on reducing code, so I’ll happily give it ago. Thanks for the knowledge.

    0
  58. 58
  59. 59

    I use @font-face with Sass no problem. Why would LESS not let you do that? Or are you talking about that Base64 post?

    0
  60. 60

    Anyone ever try this on bigger/enterprise teams? I’ve always loved the idea of css preprocessors when I first heard of them but I imagine they wouldn’t work well on bigger teams where you have varying levels of css expertise. I imagine this would especially be true if you’re outsourcing at all.

    0
  61. 61

    FYI: Sass has a firefox plugin called FireSass that makes your sass files and line numbers visible in Firebug directly.

    3
  62. 62

    For those of you who are getting frustrated with having to compile your LESS file manually every single time, there is a LESS.app available here: http://incident57.com/less/

    Run the app, browse to your LESS files and then every time you save, it will compile it for you. Plus it gives you better error messages too.

    I have been using LESS at my new job for the last 2 months and it has made my projects and workflow a lot more efficient by saving time and therefore money. My CEO is very, very happy about the introduction of LESS into our work systems. Sure, it might be a little bit difficult for multiple people to manage, but the beauty of LESS is that because it is so simple to use (especially with the LESS app) it would only require a small amount of training to get other workers up to speed.

    I can set up a project to have a basic template with the ‘skeleton’ LESS/CSS file, and then create multiple whitelabel templates based on that skeleton file with their own LESS/CSS file to specify the primary colours for objects such as links, headings, backgrounds and borders.

    For example, instead of having to trawl through a CSS file with thousands of lines of code to find out exactly what colour my H3 headings are (ever tried to remember an obscure hex colour value?) or what colour my buttons have been set to, all I have to do is specify the appropriate variable and voila.

    Also, by using nested rule sets can make things so much easier for me when working with larger projects.

    However, I don’t think I would use LESS for small, brochure-type websites where they don’t require very specific CSS rules, but for larger websites I will definitely be using LESS for nearly all of them in the future.

    2
  63. 63

    True but technically you can ignore the nested syntax if you so wish and write less just as you would write CSS with the advantage of variables, mixins and operators.

    0
  64. 64

    LESS’s environment doesn’t lend itself to “many hands in the cookie jar” unless every one there knows how to compile it. It would get messy. LESS in my eyes, is NOT for going live with. It is only to be used when cutting up a site. If there are more than one person working on cutting up the site then your company needs to re-evaluate it’s operations and their team. It only takes one person to cut up.

    1
  65. 65

    I like this!!!

    -Jessica Boblooch

    0
  66. 66

    Now that Flash is gone, I rely heavily on JQuery to achieve desired animation effects. Thus, I have a lot of JS files already. An extra JS file that I can do simply without does not really solve anything.

    Thank you for posting this article thou, maybe future development of these features will bring something more useful one day.

    0
  67. 67

    I’ve been using LESS professionally for over a year. It’s absolutely vital to my initial workflow, especially when at the “throw everything at the wall and see what sticks” phase of development. Also if you’re using the “class-then-id” method of doing media type controls, less really shines in helping you import global behaviors across different media type definitions.

    That said, it’s not a panacea. You really can get crazy with your nesting, lose all discipline with respect to common styles across your application, and seriously mess with selector performance because of #deep .pointless .selection #definitions .like #this, when all you really needed was “#this” to target your object.

    8
  68. 68

    Does not degrade gracefully in the absence of a Javascript engine. How can this be considered remotely satisfactory for accessible coding?

    Saving time is great and all, but if you need to sacrifice the scope of your user-base that has access to CSS that’s not a cost I’d willingly pay.

    0
  69. 69

    Um….then don’t use the js version. I think a lot of people are not reading this article fully, or aren’t getting how to use LESS. LESS compiles and generates the CSS, and then just serve the CSS file. There is no need for the js.

    The LESS.js is compiling live so you don’t have to do anything. If you don’t want use the javascript file though, then don’t!

    With Sass, you type out your Sass code (either in .sass or .scss file), you compile it (I do it with Compass) which outputs a generated CSS file. You then use THAT in your html/php/whatever file. LESS works the same way. The LESS.js just automates it for you.

    4
  70. 70

    He just used the less.js as an easy way to explain this. I think most people would choose to compile the .less files into .css before upload.

    One of my concerns dovetails in to this one: once you start making edits you either have to continue to recompile or you have to give up the .less and work from the complied .css. That seems daunting for my team.

    0
  71. 71

    I dont like these CSS meta languages. For our german readers, i wrote an article about this (stupid) stuff: http://www.shiftedwork.de/blog/2010/09/09/uber-den-unsinn-von-css-frameworks/

    2
  72. 72

    I use .htaccess to parse my css files as php. I’ve looked over a few articles about this and just don’t see why this is so great. If it is, I would like to see why. Not opposed to trying something new if it is actually better.

    0
  73. 73

    Less itself doesn’t require JavaScript it’s a language. The original compiler is ruby based, compilers output standard CSS for finalized sites.

    0
  74. 74

    Hi,

    I was looking a way to easier my life with css then i discover less css.
    I think less is great, and with less.app on macosx it’s very cool. (great tutorial dmitry)

    Then I discovered turbine css.
    http://turbine.peterkroener.de/docs.php

    Turbine css seems to to go far away than saas. Turbine can implement plugin to generate css cross browser compatible.

    What are your feedback about turbine ??

    thanks

    laurent

    what do you think about it ?

    0
  75. 75

    I will defenitely try this out in my next project! Great post!

    1
  76. 76

    I just wanted to say that I have just begun to use LESS and love it. It does save a lot of time.

    Also I don’t think this was clarified in the article, but LESS actually has two files, the StyleSheet.less and then the generated StyleSheet.css. When you compile the .less file it creates valid CSS which any developer should be able to easily figure out.

    I dissagree with using the JavaScript version and would only consider using the LESS OS X App as it can compile a true CSS fill for use on the web, PRIOR to the site actually being live. Additionally once the site is setup you can use the LESS App on the live site to update the CSS and LESS file in one easy step.

    I haven’t used Sass or others, but after reading the comments I will have to check them out.

    0
  77. 77

    nice post thnx ;)

    0
  78. 78

    I looked at SASS and LESS certainly seems a lot more user-friendly and easier to implement. However when trying to find out more on editor support one comes to realize how poor a choice the name “less” is in an online world.

    0
  79. 79

    You’re correct, Rob – it doesn’t matter what you name a mixin. However, Matthew was just pointing out that in the same example, Dmitry creates the mixin as “rounded” and then references it as “rounded-corners”.

    0
  80. 80

    I use Sass + Compass now and definately wouldn’t want to go back to writing plain CSS.

    Writing CSS in hierarchical fashion makes much more sense. The code becomes much easier to read and write.

    A lot of the hard core CSS’ers out there don’t seem to like it. Maybe they feel it diminishes there craft by making it too easy??

    I don’t know how how Less compares to Sass but it’s good to know their is an alternative. I guess ill stick with Sass though until Less has a framework like Compass which makes it so damn easy to create complex layouts.

    -2
  81. 81

    As I was writing some CSS3 rules, it did occur to me that some of the declarations could be stored in variables. I was thinking about writing a jQuery Plugin to sort this mess out but seeing this gave me a nerd boner. This is what CSS is missing. I can’t wait to mess with it. Thank you so much!

    Shouldn’t #login-box element be calling .rounded(3px) instead of .round-corners(3px):
    .rounded(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
    }

    0
  82. 82

    Most of the time, JS is turned on. I don’t know the exact number but your audience will, more than likely, have JS on. I think there’s a PHP version to work with as well.

    0
  83. 83

    +1 sir!

    I would say it has to be the opposite though. Wouldn’t the hard core CSS’ers want to find an easier/faster way to do what they are doing? If you are using Compass, then you know how awesome the CSS3 mixin imports are for doing things like box-shadow, border-radius, gradients and the like are. I can’t understand why you wouldn’t want that? You write one line of Sass that takes 3+ lines of CSS.

    Good comparison between the two here: https://gist.github.com/674726

    In my opinion though, Compass makes choosing Sass a no brainer.

    -1
  84. 84

    I hate it when people complicate things.

    -3
  85. 85

    To think that a few months ago I was bitching about how I had to re-type the same colour code over and over again, and wondered why CSS stylesheets did not have a variable scheme…. well there we go!

    1
  86. 86

    Even if you only use LESS to set colour variables, that alone makes it worth the extra effort.

    0
  87. 87

    I remember hearing about less & sass a couple of months back on nettuts. My opinion was that while it may seem like a nice idea, css is not that complicated that it needs simplifying. The attention grabbing feature that peaked my interest was the variables but I later realized that if you know how to use classes properly then you shouldn’t really need them.

    1
  88. 88

    Catherine Azzarello

    December 6, 2010 6:07 pm

    I use the Less app and love it–and I’m a solo designer who works on brochure sites. It’s perfect for all the CSS3 vendor prefixes. I just make the rule once and go with it…text-shadows, rounded corners, gradations, etc.

    I had tried the SASS thing, but never understood Ruby and how to implement it. When the app came out, I was sooo happy!

    And thanks for the ‘&’ and pseudo-classes note! I had missed that.

    0
  89. 89

    Interesting read. Will definitely try this out later

    0
  90. 90

    One more enlightening article,…that’s the beauty of SmashingMag.I read for one & discovered few more…
    Thanks,

    0
  91. 91

    CSS preprocessors will help newbs build huge selectors and if you’re a decent markuper, you should be able to identify a selector with 2 selectors.

    It’s nice for organization if you use it right though.

    0
  92. 92

    Personally, I think css is pretty elegent already, if you use it correctly. With alot of frameworks, script and add ons, I don’t think adding LESS is actually functional. I like to keep it simple, light, fast and accessible. Having LESS might be abit heavy in my opinion. Maintenance wise, I think using css import is pretty neat. Keep it simple, use it correctly and write it well will be alot cooler than using LESS. What say you?

    3
  93. 93

    Is there any way how i can compile my existing CSS to any of theese? If there would be such tool, i could try to use it on my projects, otherwise i would stay in my standard css (replacing colors is as easy as ctrl+h and other things are not so much needed when using apropriate tools and ways)

    0
  94. 94

    a lot of people out there says hot news about head.js, eh eh eh got a knowledge heres about CSS :D
    thanks^^

    0
  95. 95

    Well, I think it is nice & creative way to build css on runtime. it seems like a useful tool for those who don’t want to be bothered with coding. As it is the CSS is simple and if coded correctly & in a planned manner in the first place serves the best for all needs.

    PS: but i’d like to code My CSS – My WAY :)

    0
  96. 96

    Speaking of variables – wouldn’t it be as easy to group all selectors (in the ordinary css syntax) that, for instance, share the same color value. That way you would only have to change the color value in one place.

    0
  97. 97

    Just looking at the flexibility of this tool gives me the creeps about the kind of stylesheets you could actually produce if you’re not really on top of things. Given the shift to mobile platforms, and how minimizing resources is adapted in the community this just feels like a step back to me.

    Flexible, but dangerous if you don’t know what you’re doing

    1
  98. 98

    Hmm… isn’t it easier to stick with standard CSS notation?

    1
  99. 99

    Providing an alternative way of doing something implies there is a problem or issue with the original way, otherwise there would be no point in providing the alternative. If what you are saying is correct, then there is even less of a reason for trying LESS. I don’t need to learn to write CSS two different ways as I see no issue with my current method.

    0
  100. 100

    I love this. We should keep trying new method to make our life better and work easier.

    0
  101. 101

    3 main things Im worried about using this technique:

    1. Is it mobile-friendly?
    2. Can it contribute to loading time?
    3. Will my forgotten website run after 3 years?

    This should be like CSS4 or something. Thanks for the article.

    0
  102. 102

    Nathan Aaron Chapman

    December 7, 2010 7:31 am

    The draw to this tech is, less time spent coding and having to run your code through one more process so it works. Either by google or your own web server.

    When I develop sites my big thing is to reduce the amount of requests. Just using imported fonts I’ve seen website hang on those requests for 10 seconds which as we know is an eternity.

    0
  103. 103

    Excellent post. Thanks for the share….

    0
  104. 104

    Keep on using tables for your page layout then.

    It’s a tool meant to add efficiency to your work flow. Remember back in the day, straight HTML, tables for layout, etc. As an industry we progressed. We started using PHP and other languages, not just for database interactivity, but to reduce the amount of code we wrote by using includes and logic. This is bringing efficiency to writing CSS.

    ** sidenote (not directed towards you) – I hate it when people don’t read the entire article and then just throw up comments without thinking.

    1. the javascript method of compiling is good for debugging & development, live version should get compiled css

    2. once the site is live with the compiled css file, edits can be made to the css file. It’s for rapid development, not really for maintenance, but you could edit and recompile

    -1
  105. 105

    Even though I understand where you are coming from, the reality is that this could definitely lead to more complicated style sheets. You would still have to copy/replace elements, only they would be @brand-color rather than the usual hex number. So, tell me again why this is helpful?

    0
  106. 106

    I believe the time it takes to compile it would negate the time savings of LESS’s shortcuts. The beauty of web programming is in not having to compile – just save and refresh your browser to see the changes. It’s much easier to make small changes to CSS, save, then refresh your browser to see the effects. It is NOT easy to internally visualize what would your website appear like while coding in LESS syntax, then waiting for the right time to compile. You see, compiling is indrectly time intensive. Even though the actual operation is short, you’re forced to not compile often because it’s much more cumbersome than the tried-and-true CSS coding of yesteryear.

    2
  107. 107

    I’d definitely wanna wait a wee while and see how Less does in the long run. Not too happy about using a JS file for anything but dickying up a web page, and I think CSS will continue to do just as well as it always has, so long as it’s written well.

    CSS3′s selectors help to minimise code, too, though the balance is destroyed by vendor prefixes. DAMN YOU VENDOR PREFIXES!! :P

    Good post!

    0
  108. 108

    Depends on the size of the stylesheet really. Benefits of using a preprocessor grow as your CSS grows in size. For a small stylesheet it may only save you a minute of work. For larger stylesheets it will save you a lot more time, especially if you re-use things like colors throughout (and use relative colors, e.g. lighter or darker version of the main color). Also helps A LOT when working with CSS3 as you can set up mixins to avoid writing many lines of browser specific code.

    1
  109. 109

    Good spot, thank you. Will have it fixed.

    0
  110. 110

    Yes, you’re right it’s a naming error on my part. That mixin should be called “rounded-corners” as that’s what I used in the example below. I tend use “rounded” in my LESS code as it’s a bit shorter though a bit less meaningful. Then again, there’s not much else to round apart from the corners :)

    1
  111. 111

    Not really. I use the Less OS X app personally and it’s just a case of launching that when I start working and editing the .less file. Compiling to CSS is less than a second and is done in the background–so fast you don’t really notice.

    It will be more difficult with pre-compiled code if you don’t have a way of compiling from LESS on your system, in which case you could just edit the resulting CSS file. They’re very well formatted, and even include comments, so shouldn’t be a big problem, however, you will need to update the change back into your .less file afterwards.

    0
  112. 112

    You can, and in most cases should, precompile the code using the methods I listed in the conclusion, in which case you’ll be serving CSS files instead of LESS to your visitors.

    The JavaScript compiler is the best way for people to try LESS without needing to install anything on their machine, which works well for a tutorial.

    2
  113. 113

    I disagree. It may *seem* like you’re writing more code with LESS because the code is longer in terms of the number of lines of code, but if you look at what’s on those lines it’s just a bunch of braces. You’re trading long selectors for nesting, which saves you time repeating the same names, and makes it easier to locate bits of related code. Of course if the selector is very short, the LESS code replacing it would be equally as short, and it’s up to you whether you want to nest it in that case :)

    0
  114. 114

    The JavaScript version won’t work if JavaScript is disabled. In this case you’ll want to serve pre-compiled CSS code using one of the methods I outlined in the conclusion.

    0
  115. 115

    Less.js is probably the easiest way of trying out LESS really quickly without needing to install anything, which makes it good for a tutorial. It won’t work with JavaScript disabled, so you may want to pre-compile the code to CSS and upload that CSS to the server. I listed some options in the conclusion for this.

    0
  116. 116

    That’s the tool I use personally. It’s a very nice app and is the way to go if you’re on a Mac.

    0
  117. 117

    The generated CSS should validate. LESS code obviously wouldn’t, because it’s not CSS :)

    0
  118. 118

    Bad example on my part. Imagine this though:

    #nav {}
    #nav ul {}
    #nav ul li {}
    #nav ul li a {}

    And I’m using #nav ul li a because there might be other anchors nested under #nav, so the specificity is needed here. Each time you’re basically repeating the same names, which LESS nesting helps eliminate and make the code a bit easier to read since everything is now indented under #nav. Does this make sense?

    0
  119. 119

    Looks great and easy to pick up. I’ll be giving this a shot for my next project!

    0
  120. 120

    You can pre-compile, and it’s recommended. I mentioned some methods in the conclusion :)

    0
  121. 121

    Chris is right, I should have made this clearer. I used the JavaScript version in the tutorial as it’s the easiest way to try LESS without having to install anything, and works on any system.

    0
  122. 122

    Is anyone else that actually uses Sass or LESS extremely frustrated with the comments here?

    Is it mobile-friendly? Last time I heard, mobile browsers use CSS.
    Does CSS contribute to loading time? Yes.
    Will your site run in 3 years? If CSS is obsolete in 3 years and no browser recognizes it, then no.

    If you are commenting on why CSS is great the way it is, or you don’t want to include javascript, or even something like you want your CSS written your way…then you don’t understand what LESS/Sass is. You obviously didn’t read the section above “Installing It.”

    0
  123. 123

    If you don’t use a myriad of browser-specific CSS3 properties (box-shadow, transition-duration, gradient background etc), don’t have really long selectors and don’t re-use the same colors throughout the CSS3, or colors based on the same shade, then LESS probably won’t be that useful. If you do, it saves you a lot of time :) Most benefits come when the stylesheet grows, values a re-used and CSS3 is introduced.

    0
  124. 124

    Sure, but what if you don’t use PHP? :)

    0
  125. 125

    It’s interesting that people criticizing CSS pre-compilers are those who don’t actually use one. People who’ve tied LESS or Sass tend to not go back to pure CSS :) I guess it’s one of those things you have to want. When I was writing CSS I could feel this friction. I noticed a lot of waste and wished there was a tool to make things easier. If you don’t have any problems with CSS then you probably won’t benefit from this. That said I do think there are a lot of developers out there who do feel this need and will get the benefit from these tools in their workflow, just like we do.

    0
  126. 126

    I believe Less.js does support @media queries as well. I cannot verify how well since I haven’t used them in my LESS code, but Alexis, the creator of Less, informs me that they are there. Perhaps the version you’ve tried is not up to date?

    0
  127. 127

    Less does support @font-face.

    0
  128. 128

    Nathan Saritschniy

    December 7, 2010 4:58 pm

    I can see that using LESS syntax could encourage newbies to use unnecessary nesting, leading to a CSS file that uses unnecessary CSS specificity. But I do also see some advantages too, especially the ability to set variables. So I’ll definitely give this a go and see which side of the fence I sit on. (My guess is LESS my steal my heart). Thanks for the article!

    0
  129. 129

    I tried it out combined with Blueprint CSS; works great, produces valid CSS (as long as we keep it valid) and really does speed up css writing.

    0
  130. 130

    I just tried and even got used to LESS in less than 30 minutes. During that time, I got to learn all the LESS syntax, test it, create a php script which will parse / cache / return 304 if not modified and even benchmarked the php parser. If you point your (whichever) tag to the php script that actually “behaves” as css on front-end, you’ll be amazed with results.

    And yeah, it works pretty fast (parses the file without reading cache about 60 times per second).

    -1
  131. 131

    does it work in all browsers ?

    1
  132. 132

    Whatever suggested we can use, but what if ur architect not happy with this tool.

    Solution : Compile and generate actual CSS file & paste in main CSS file. It’ll save my time to write big CSS files.

    0
  133. 133

    Yes i like this article and mostly i like LESS css fundamentals.

    0
  134. 134

    I totally agree, this is the first time I’ve herd of LESS and SaSS and I’m itching to give it a go on the next project!

    0
  135. 135

    I’ve looked over LESS earlier this year, around July i think. I i find the solution of integrating a .js for this pretty bad. If you also need, let’s say JQuery and some Jquery plugins, there is a lot of JS to be included in the website. The apache extension however seems interesting

    -1
  136. 136

    I’m with Rafy, many writers of books on jQuery/JavaScript already advise against using JavaScript for anything but Progressive Enhancement, having a site rely on the user’s ability to view JavaScript reliant pages is madness! Madness, I tell you!!

    0
  137. 137

    Needs training, but it is really a must-have on my next project!

    I will use the server-side php edition!

    Best regards from Brazil.

    -1
  138. 138

    So, what would you recommend for the automatic compiling in Windows, so I don’t have to bother and just go straight to my browser for testing with firebug?

    0
  139. 139

    i still don’t understand why you try to make a presentational language into a scripting language.

    if you know how to write efficient CSS, you should have no problem keeping it maintainable no matter what the scale.

    it also doesn’t hurt to add some comments into you css & html files

    2
  140. 140

    Great article and “LESS” is really good choice.

    0
  141. 141

    Is this true? Does firebug not work properly when debugging CSS issues inside of a less file?

    I could see this potentially being the case due to it now a .less file rather than a .css file.

    0
  142. 142

    How is:

    @brand_color: #4D926F;

    #header {
    color: @brand_color;
    }

    h2 {
    color: @brand_color;
    }

    Less code than:

    #header, h2 {
    color: #4D926F;
    }

    3
  143. 143

    Good article introducing both tools. When it comes to developing, I spend most of my time in CSS. I did try out LESS for a while but ended up abandoning it because I suppose I am a purist when it comes to CSS, and simply put, I like to be versed in it. Just as I wouldn’t use a WYSIWYG tool to make a website, I prefer to be in the trenches of the code to know exactly what’s going on, and where.

    Still, this is a good start as the future of web development is constantly evolving. Being able to use variables in CSS is hopefully the future of its native development but for now I do not want another layer of processing to go through.

    1
  144. 144

    It would be written like this:

    @brand_color: #4D926F;

    #header, h2 {
    color: @brand_color;
    }

    Then where ever else you might have @brand_color. Then you can just change the original @brand_color once without doing a find and replace, that is what makes it LESS, not defining the same color over and over and over again, just using the variable.

    0
  145. 145

    What I really like about less is that the html id and classes can be more for a semantinc proupose than a styling proupose. I love to just has only an id or a class for each html element.

    -1
  146. 146

    Good article… But how about the support for Internet explorers?. I am not getting LESS in internet explorer

    0
  147. 147

    Cool, I will have another go with LESS and see if I can get the @media and @font-face working.
    Cheers Guys, Great article + Site.

    0
  148. 148

    JS or PHP – STILL MORE CODE!! Some people may need LESS for their projects some may not. If one says he/she does not wish to use it then this is the choice one makes. Replying and saying that he/she ‘didn’t read the article fully’ is really rude.

    People you gotta learn to accept the differences between you and other readers. Everyone has their own way. Instead of negatively tagging a comment and thinking just because the person thinks differently his opinion sucks, better try to convince him/her why your way is better. But do it politely and CONSTRUCTIVELY!!!

    Don’t just say probably this guy is stupid so let’s insult his intelligence! First, just say, “Hey you know, this is better due to ‘this’ and ‘that,’ so think about this or maybe try it if you do not believe me.”

    In this case, the reader pointed out that he does not like the idea of having an extra code. So what? It is true. Now maybe, you could explain that this is an insignificant amount of code that will not affect an overall loading process. That would be a lot more respectful.

    Be nice to one another! Don’t disrespect other people.

    6
  149. 149

    The percentage of people who have Javascript turned off is so incredibly minuscule that it doesn’t really matter. People that have Javascript turned off wont be able to view a very higher percentage of sites like the author intended. It’s “neat” to have degradable Javascript, but those people who have it turned off know that their web experience is gonna be sh*t anyways. Javascript is so much faster now, and any real device used for viewing the web will have Javascript support. It’s time for people to stop catering to the little cult of Javascript turned off.

    4
  150. 150

    I think LESS is AWESOME!!! I started trying it out about 6mo ago – seeing variables in CSS made me melt <3 haha
    Haven't looked into SASS at all, but I love LESS, so glad you posted this!

    0
  151. 151

    I would say it’s helpful only AFTER you understand and are very well-versed in writing out all your CSS by hand. As we learned from Dreamweaver Design View — there are no shortcuts before you learn, only shortcuts after :D

    0
  152. 152

    No. All you see on the browser-end is the decompiled CSS, not the LESS CSS.. that is the job of the compiler: it takes your LESS and transforms it to regular old CSS in the server side, before sent to the browser. =) (well, I use the Ruby Gem so honestly not sure how the Javascript one works)

    Don’t believe me, go to the http://lesscss.org/ website and look at it using Firebug!

    However, I do tend to agree with what Deborah said – if you don’t have a clear view of how the CSS *should* be written – which just flat out requires experience and good planning – then LESS can create MESS ;) But if it’s properly written then you will see real benefits.

    0
  153. 153

    oops I wrote that wrong, meant to say all you see in browser view is the *compiled* CSS
    Phew that’s confusing *wipes forehead*
    haha

    1
  154. 154

    What, you don’t want to use PHP to write CSS in your ASP? XD

    0
  155. 155

    i agree. it’s like CSS for your CSS ;D
    i write my CSS in hierarchical format anyway for organization purposes, have always been indenting children etc and taking away all the obviously superfluous code just seems like the next generation in CSS to me.

    I do agree that it can be confusing to edit though.

    0
  156. 156

    I’ve been using raw CSS for 10 years, and I’m just now discovering the beauty of SASS… It’s definitely work to try and master (kind of) another language after becoming so at home in CSS. But I think the mixins, variables and so on will make it worth it. Or at least I hope so…

    Anyway, worse comes to worst–I go back to CSS. No harm done.

    Also I think it’s going to take a lot more perseverance for me to get into Compass. Baby steps, anyway…

    0
  157. 157

    I could counter that if you need variables in your stylesheets, you’ve not understood what the C in CSS implies.

    -4
  158. 158

    Why add a layer of complexity to a styling syntax that is more than simple enough to begin with.

    K.I.S.S = Keep it stupidly simple.

    -1
  159. 159

    LESS is pointless imo.

    -1
  160. 160

    This article is horrible, i’ve followed what the author has said and it’s just not working, there’s obviously something missing from your article, like, does it need to be uploaded to a server to work or can i simply create my html file here on my computer? i’ve tried it so many different ways, and this is just TOTAL SHIT, this shit just doesn’t work.

    If I can’t get this crap to work, then this is one POS of an article.
    just pisses me off.

    -4
  161. 161

    Nice compilations,
    is that much easy how you have explain it

    0
  162. 162

    Congratulations on being an idiot! 1,041 people figured it out just fine :)

    0
  163. 163

    yeah that’s what i thought, until i downloaded a pre built example that worked online, but on my computer it didn’t work. hmmm, and 1041 people, where do you get that genius? all bow to the LESS God, Jim DB!

    -4
  164. 164

    and obviously if you follow what the guy said, it just doesn’t work, so what’s missing in this article? if all you had to do was include your .less stylesheet, and a link to the less script on google code, then it would have worked….. but…. it…. didn’t…..

    -3
  165. 165

    you could use a build file to compile your site, it is handy for other thinks too. Good Editors allow you to run them with short cuts.

    0
  166. 166

    This is cool! Thanks..

    0
  167. 167

    I have a quick question here why they don’t use LESS in http://lesscss.org/

    If its so handy and valid means they would have used in their site right? but they still using the normal CSS…

    I don’t know why…

    Just think about this friends…

    -2
  168. 168

    I like the idea but unless this functionality is built in to CSS standards then I don’t see why anybody would use it… Yeah, you can declare the same string several times but there are also ways to do that without loading up the translator.

    Example:

    h1, h2, h3, div.this, #wrapper .module { color:#fff; }

    0
  169. 169

    Seriously? You wouldn’t be able to tell on any site that is using Less because it replaces the @variable with whatever was declared. When you write PHP you can say:

    <?php echo "hello word”; ?>

    and inspect in firebug and it will say:

    hello word without the php… it’s a higher level programming language. That’s the whole idea.

    2
  170. 170

    How don’t you see why anybody would use it? If you actually used this or any other OOCSS methods, and tested to see what the difference in file sizes were.. You would use LESS or something like it every time from then on… if you cared at all about what your File Sizes were.

    0
  171. 171

    Finally! Great solution.

    I’ll use it in my new project with the multiple language versions – it should be very useful there. So excited ;-)!

    0
  172. 172

    I am thankful to the author who shared this pretty valuable information with our guys.

    Its a awesome thing.

    Thanks for sharing :)

    0
  173. 173

    There is a very powerful technique to compensate for rather large CSS files generated with LESS compilers – server side compression.

    Compression algorithms are extremely effective when dealing with sources which are highly repetitive so in case of CSS files GZIP or DEFLATE compression can gain up to 90-95% reduction of the original uncompressed files generated with LESS.

    Not only that but instead of using JavaScript LESS compilers, which will fail in case JavaScript is disabled, in case of server side compression and compilation all the work is done on the server and the browser only needs to decompress the CSS content it gets from the server.

    Therefore I would highly recommend to use the PHP or .NET version of the LESS compiler combined with GZIP or DEFLATE compression in order to get the maximum performance and reliability.

    1
  174. 174

    Then, its a lifesaver plugin :) Thanks for sharing.

    0
  175. 175

    Interesting.I read it from a friend’s recommend and turned to this source English version.
    css preprosessor offers a way to define the page views in another language,treating css as object file,thus finding a method to make code more logically.It throws problems to the prosessor(like a libruary) which include Compatibility Issues,no variables,redundancy.Object file can omit negligible blanks , comments,and without so much logic maybe not so easy to copy and reuse.
    What I think the problem is, maybe one is it needs learning.another one who want to understand your code,he had better learn LESS first.It isn’t a big problem maybe.But until LESS become a main libruary in CSS as jQuery in JS, not so many coders will have the energy to learn it,even it is so easy to learn.Another problem is the protability.JavaScript is a good choice,but it also has the compatibility problems.Other language must stick to a certain platform. I use IDE to write code like DW or PHPed,sometimes I can add codes by dragging a certain item without coding.If LESS can be integrated in IDEs and owns the functions like dragging, code tips and trandparent debug, I think it’s better.

    0
  176. 176

    I’ve known about LESS for quite a while, but hadn’t used it because I thought it was Ruby-only. Thanks for writing this article and informing me of less.js… I’m going to be using it for sure!

    0
  177. 177

    ajay anand sharma

    December 31, 2010 5:45 am

    Gr8 tips. this will save lot of time. thanks

    0
  178. 178

    No no no no no. The variables are for specifying your application color scheme and such in a central location and then using it across the app. Having an accent color duplicated all over the place for completely unrelated elements has nothing to do with ‘cascading’ and is a clear violation of ‘DRY’ principles.

    1
  179. 179

    RE: 3. Reusing Whole Classes.

    I would like to clarify that in LESS 1.2.21 (RubyGem), you must declare a default value for any parametric class. The “canonical example” found at lesscss.org will not complie.
    .border-radius (@radius) {
        border-radius: @radius;
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
    }

    But this does work:
    .border-radius (@radius: 5px) {
        border-radius: @radius;
        -moz-border-radius: @radius;
        -webkit-border-radius: @radius;
    }

    I’m not sure when this was changed, but it does enforce a good programming habit: no null references.

    0
  180. 180

    That is also what I’m thinking about. What if you’re done with the LESS file, compiled it to CSS and then want to change some things later on. If you only change the CSS file, you might as well delete the LESS file, because they will no longer be the same. Or you can edit the LESS file, but then you have to recompile it for every little change. Seems like it is only useful in the process of building a site, not for maintenance.

    0
  181. 181

    What do you exactly mean with ‘live use’, Chris?

    0
  182. 182

    Jens Ahrengot Boddum

    February 15, 2011 2:52 pm

    But LESS’s syntax is closer to normal CSS than SASS – Therefore LESS seems more intuitive to most people :)

    Jeffrey Way on Nettuts wrote an article on LESS where he includes his classes file in the demo file, if anyone is interrested.

    I went with LESS a while ago and I’m really happy for that decision.

    1
  183. 183

    I have used .less in html5 tag but IE not support. any one help me

    0
  184. 184

    One word:
    YES!!!

    0
  185. 185

    This is a really helpful article. The code snippets are great as well!

    0
  186. 186

    @John: How is delivering CSS to browsers going to lead to cross-browser incompatiblity? I thought CSS was a standard. Haven’t we been using CSS for a decade or more already? Also, what does Javascript have to do with this topic? When you’re done with development, you compile your LESS into pure, 100% CSS on the server.

    0
  187. 187

    @cormac: You’re right, and we should all go back to programming in assembly because there’s nothing necessarily wrong with assembly. Speaking of which, how do you push a CSS rule onto the heap again??? Oh, I guess that depends on the machine architecture, oops.

    -1
  188. 188

    Hi everybody,
    I started using less css recently, but I am having a problem, its not displaying my background-images.

    background:url(../img/backHeader.jpg) repeat-x;

    I am using JavaScript compiler
    Does anyone know why?
    thanks

    0
  189. 189

    i love you, thanks boss

    0
  190. 190

    The author of LESS CSS has removed Accessors from it. You should append your article. Source: https://github.com/cloudhead/less.js/issues/6

    Great article! Love LESS!

    0
  191. 191

    Hi everybody,
    i’m recently started to use less and i have a question, can i use in less css adjacent selector ? (X + Y, X > Y, X ~ Y)

    Thanks

    0
  192. 192

    If you’re using Dreamweaver on Windows to code your websites, there’s a free (donation-ware) plugin that will directly compile your .less files into pure CSS!

    It’s available on the Adobe Exchange:

    http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2692522

    0
  193. 193

    Try just using url(img/backHeader.jpg) repeat-x;

    0
  194. 194

    Pietro Di Marzo - NerdSkullz

    December 1, 2011 8:50 am

    Thanks for the article, I’m using Less but I wonder if there’s a way to change the attributes on the fly with javascript so that if I click on a button in my html in the css/less the value change, for example:

    @acqua_bkg_header: #3e8b8b;
    @red_bkg_header: #902f2c;

    background: @red_bkg_header;
    click on a button in my html so that it becomes
    background: @acqua_bkg_header;

    0
  195. 195

    You can always use Crunch to compile on Windows. It’s cross-platform (Mac / Win)

    1
  196. 196

    I think LESS is getting more traction with Bootstrap, from Twitter. Compass is extensively built for sure and easily customizable. Both are great in my opinion.

    0
  197. 197

    That was the entire point of the article, you DON’T need to relearn how to write CSS, LESS extends CSS so that you can write less CSS markup

    0
  198. 198

    Arvind Bhardwaj

    June 4, 2012 2:19 am

    Is there any performance issue with using LESS. As it needs an extra JavaScript file to compile it and also the file seems to be compiled on every page load. Please correct me if I am wrong.

    Thanks.

    0
  199. 199

    I really don’t get the point of using variables in css files if you know how css works. If i set a class to define a font color and use that class to every element i want to color i can just change the color of the class later to change all elements color :-)

    Why reinvent the wheel???

    0
  200. 200

    Thanks for the article. I just posted my experience with using LESS and Bootstrap together – blog.appliedis.com/2013/02/04/bootstrap-with-less/
    There are links in the post to a working example and also the github repo of the source code for the example.

    0
  201. 201

    So,by using LessCss, do you have to go back to css to style it??I mean, you have set the variable,mixins, etc…And style them at less…Will that styles going to transfer to the css???

    Just a confusion,as im planning to start doing less.

    Cheers

    0
  202. 202

    There are plugins for Firefox and Chrome for both Less and Sass.
    Less for FireFox
    https://addons.mozilla.org/en-us/firefox/addon/fireless/

    This is a lifesaver as it makes the line numbers accurate.

    0
  203. 203

    i am not getting how less works, i have install the less windows GUI but really i won able to understand how it works. please help me

    0
  204. 204

    How can I enable SASS or LESS css enable in firebug ? (Note : I have installed firebug add on for LESS.)

    0

↑ Back to top