Finish with CSS

Thursday, 13.02.2014


About year and a half ago I came across on LESS.js. I was interest in it from the beginning, I stated that it can be used to create a completely visual modifiable application. Collegues, were sceptical to LESS.js and to sense of using it at all.

During all this time I had in my head thought that something like this exists but finally, some day, life forced me to use this technology. In one of my projects, which was directed to people with disabilities, assumption was that every person can change contrast, fonts and do other things on page.
Then, in my programming garage LESS was debut near Bootstrap 3. Finally, client gave up with this functionality, but LESS is still with me and I am naturally glad with this fact.

What is LESS.js?
LESS is one of recently formed languages for dynamically creating cascading style sheets. That simple:  we write code in less, we compile and we get CSS.
To this family also belongs: SASS, SCSS and others. Bases of this languages are pretty much the same, but each of those have some things that don’t have others.


Why LESS/SASS/SCSS are worth using?
I begin with that, there are not too many reasons that you should not use this kind of languages. CSS with not more than 100 lines can be this case.

A little example for nesting:

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

Second example – mixins:

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

There are to many benefits:

  • even base use of this languages (nesting) is much more DRY than pure CSS , we don’t write similiar sequences of CSS over and over again, but we nesting selectors,
  • above makes our structure easier to change, it is more clear and obviously we don’t write the same selectors / sequences hundred times
  • we can use variables to keep colors, we can use our names conventions for it and we can also use them in our or built-in funcitons like darken() from LESS
  • we can also use variables to keep other css values like, i.e. font size, background image url, paths or font family name,
  • according to DRY rule, it’s recommended to use  mixins, which behave like functions in any other languages in which we can enter arguments and even set default values,
  • we can operate on numerical parameters with base arythmetic,
  • if we have pure CSS in LESS (and others), compiler will just insert it at compile, we can also “decompile” CSS to LESS/SASS/…
  • we can make our application (if we want or need it) infinitely visual customizable, by client, by random or even by final users – brilliant, isn’t it?

I could delve into each language, but I think even above list of benefits will increase programming joy, because we can program CSS at last! :)


How to compile:

Ways to use LESS/SASS/.. are many. LESS inlike smiliar languages (less.JS ;) ) can modify site on the fly, without it reload (javascript take care of it).  That in some circumstances can be beautiful and very helpful. Just imagine that we save LESS code in our editor and LESS Watch change page elements and will do that on every web browser when we have our page opened. So we can write something on one monitor and on save, then we can watch changes on other, i.e. we add 10px to width and we have our css and less files saved, so we mustn’t  copy-paste antyhing.

Other ways to use less/sass/… :

  • using dedicated compilers for our base language (i.e. for php, python ) – undoubledly benefit of this solution is that we can rapidly introduce new developers to our project, they mustn’t install and configure compilers/plugins for their IDE/editors, they musn’t install anything else also
  • editors specialy build for those languages
  • compilators and plugins for IDE’s
  • separate compilators

I don’t know as You, but I don’t want to go back to pure CSS again, what’s the point?