samedi 21 avril 2012

LESS : scripting CSS


CSS  makes the buzz since we discover day after day the powerful CSS 3 features : 3D, Shadows, Transformations, Media Queries, ...


But if you look at HTML you can see many powerful technologies to make HTML page dynamic : PHP, JSP, JSF, ASP, ...


Whitout them, building webapp 2.0 would be just that hard !


We are living a time where customers want more customisation, where your webapps are touched by many differents devices. We definitly need dynamic CSS !


LESS  does the job by extending CSS.


With LESS you can add theme support, refactor your duplicated CSS code , customize look and feel on the fly, ...


Using LESS is using CSS with new syntaxic sugar.


But at the end of the day, a browser only knows CSS : you have to perform a LESS to CSS translation. 


You can use two modes for this:
  • dynamic :  LESS style sheet are translated on the fly by the browser 
  • static : via a LESS compiler, CSS are then deployed like usual CSS


Now, a quick overview of LESS.


Variables



Variables allow you to  manage gracefully common style values like colors :


@some-color: #FF34AA;

#myid { color: @some-color; }
.myclass { color: @some-color; }


LESS CSS translation :

#myid { color: #FF34AA; }
.myclass { color: #FF34AA; }


Mixins



With mixins you can embed any CSS inside another declaration.

.margined {
  margin-top: 1em;
  margin-bottom:1em;
}
#banner a {
  color: black;
  .margined;
}
ul {  
  .margined;
}

Target  embeds all styles defined in mixin :

#banner a {
  color: black;
  margin-top: 1em;
  margin-bottom:1em;
}

ul {  
  margin-top: 1em;
  margin-bottom:1em;
}

You can add args to mixins !


.margined (@height:1em){
  margin-top: @height;
  margin-bottom:@height;
}


#banner a {
  color: black;
  .margined(1.5em);
}

ul {  
  .margined;
}


Translates as :

#banner a {
  color: black;
  margin-top: 1.5em;
  margin-bottom:1.5em;
}

ul {  
  margin-top: 1em;
  margin-bottom: 1em;
}

See the default arg value feature on @height !

You can add many args to a mixin like a method.

 

Arithmetics



You can add, divide, multiply, substract variable :

@simple: 5%;
@double: @simple * 2;
@halfdouble: @simple + @double;

color: #666 / 3;
background-color: @somecolor + #250;
height: 100% / 2 + @double;

LESS keeps consistency with units, then 10px * 2 compute as 20px.



Playing with colors



These are very handy functions to build a theme for instance.

Some snippets:


lighten(@somecolor, 30%);     // 30% more ligther than @somecolor 
darken(@somecolor, 30%);      // 30% more darker than @somecolor

saturate(@somecolor, 3%);    // 3% more saturated than @somecolor
desaturate(@somecolor, 3%);  // 3% more saturated than @somecolor

Time to play



If you want to see LESS in action, have a look on Boostrap Twitter which is based on it.


LESS concepts will be a great bunch of features to add to official CSS.

But, Java ecosystem does not offer a good support for LESS compilation.


We'll see later how to integrate LESS on the server side with Rhino Javascript engine.






Contrat Creative Commons
the jee architect cookbook by Olivier SCHMITT est mis à disposition selon les termes de la licence Creative Commons Paternité - Pas d'Utilisation Commerciale - Pas de Modification 3.0 Unported.


Aucun commentaire:

Enregistrer un commentaire