Posts taggés less.js

less-sass2

LESS versus SASS

0

Nous vous proposons aujourd’hui un comparatif entre deux préprocesseurs dont nous avons déjà parlé : LESS et SASS (combiné à Compass).

Pour rappel, un préprocesseur CSS est un outil qui permet de transformer un langage particulier en CSS valide. Ces préprocesseurs CSS vous permettent de créer des feuilles de styles plus maintenables. Quelque soit le préprocesseur choisi, la syntaxe du langage est relativement proche de celle de la CSS.

Pourquoi l’utilisation d’un préprocesseur est-il conseillé ?

Au fil du temps, la confection d’un code CSS se complexifie du fait de l’augmentation du nombre de règles, du nombre de fichiers, des effets CSS3, du debug cross-browser, etc… Ces différents facteurs ont un impact direct sur la maintenabilité de vos CSS. Grâce à l’utilisation d’un préprocesseur, vous pourrez éviter les répétitions de valeurs (codes couleurs, dimensions…), regrouper des propriétés des règles CSS et organiser au mieux votre intégration.

Installation

L’étape fondamentale, pour pouvoir utiliser ces préprocesseurs, est l’installation. SASS et LESS sont construits sur deux technologies différentes.

SASS nécessite l’utilisation de Ruby, ce qui signifie qu’il vous faut l’installer préalablement sur votre poste. Pour retrouver le détail de l’installation de Ruby, cliquez ici.

LESS est basé sur le langage JavaScript. Plusieurs possibilités s’offrent à vous quant à la compilation de vos fichiers LESS. Pour (re)découvrir les différentes mises en place, rendez-vous ici.

Extensions

Les deux préprocesseurs ont des extensions qui rendent le développement web plus rapide et plus facile.

Comme présenté dans un article précédent, Compass est l’extension la plus populaire pour SASS. Elle offre de nombreuses fonctions réutilisables afin de palier à certains problèmes de compatibilités navigateurs mais également des fonctionnalités très utiles comme des aides, mises en page, typographie…

LESS dispose également de plusieurs extensions, mais contrairement à Compass, où tout est centralisé, les extensions de LESS sont séparées car elles ont été créées par différents développeurs. Pour les utilisateurs chevronnés cela ne posera aucun problème. En revanche, pour ceux qui souhaitent débuter avec LESS, ils auront besoin de temps pour choisir la bonne extension.

Langages

Chaque préprocesseur CSS a son propre langage mais ont tous une syntaxe similaire, proche du CSS.

Utilisation des variables

Que ce soit avec SASS ou LESS, vous pouvez (et vous devez) utiliser des variables. La seule différence concernant la déclaration et l’utilisation des variables porte sur leur écriture : avec SASS, vous devez préfixer vos variables avec « $ » et pour LESS avec « @ ».

SASS LESS
$color:red;div{
color:$color
}
@color:red;div{
color:@color
}

Mixins

Les mixins sont des fonctions qui permettent la réutilisation de propriétés dans les feuilles de styles. L’avantage des mixins porte principalement sur le code : il est plus court et plus facile à modifier.

Leur écriture diffère en fonction du langage choisi :

SASS LESS
@mixin bordered{
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
@include bordered;
}
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
#menu a {
.bordered;
}

Avec SASS, vous devez déclarer que vous écrivez une mixin avec le mot clé « @mixin ». Tandis qu’avec LESS, vous écrivez votre mixin telle une classe CSS. L’utilisation d’une mixin via SASS s’effectue grâce au mot clé « @include » alors qu’avec LESS vous appelez simplement le nom de la mixin.

Voici un exemple d’utilisation de mixins avec arguments :

SASS LESS
@mixin bordered($width : 2px) {
border: $width solid black;
}
#menu a {
@include bordered(4px);
}
.bordered($width : 2px) {
border: @width solid black;
}
#menu a {
.bordered(4px);
}

Le partage de propriétés

SASS vous offre, contrairement à LESS, la possibilité de partager un ensemble de propriétés CSS à un autre sélecteur. Pour cela, il faut utiliser @extend.

SASS LESS CSS
.bordered{
border:1px solid black;
}#menu a{
@extend .bordered;
}

N/A

.bordered, #menu a{
border:1px solid black;
}

Manipulation des couleurs

SASS offre une gamme complète d’outils pour manipuler les couleurs. Toutes les représentations de couleurs (couleurs nommées, hex, rgb, rgba, hsl, hsla) sont interprétées. SASS offre de nombreuses fonctions pour les couleurs qui n’existent pas en CSS, par exemple : (attention, cette liste n’est pas exhaustive)

  • lighten($color, $amount)
  • darken($color, $amount)
  • saturate($color, $amount)
  • desaturate($color, $amount)
  • adjust-hue($color, $amount)

Sachez que LESS, propose approximativement ces mêmes fonctions grâce à cette librairie de fonctions

Manipulation de nombres

Les deux préprocesseurs vous permettent d’utiliser des nombres et des fonctions arithmétiques de base. Cependant, ils diffèrent sensiblement par rapport à la façon dont ils gèrent les unités.

SASS connait les bases de l’arithmétique. Les unités complexes sont prises en charge puis SASS possède également des tables de conversion, de sorte que toutes les unités comparables peuvent être combinées. Ce préprocesseur vous permettra aussi de définir vos propres unités et se fera un plaisir d’imprimer des unités inconnues dans votre CSS.

En revanche, LESS ne gère que les unités simples et de même type.

SASS LESS
1cm * 1em => 1 cm * em
2in * 3in => 6 in * in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5
1cm * 1em => Error
2in * 3in => 6in
(1cm / 1em) * 4em => Error
2in + 3cm + 2pc => Error
3in / 2in => 1.5in

Structures conditionnelles et boucles

LESS ne propose aucune structure conditionnelle, ni de type logique booléenne (<,>, <=,> =, ==). Il ne gère pas non plus les opérateurs de comparaison, contrairement à SASS.

Exemple de structure conditionnelle :

@if lightness($color) > 30% {
 background-color: back;
}
@else {
 background-color: white;
}

Exemple de boucle :

@for $i from 1px to 10px {
  .border-#{i} {
    border: $i solid blue;
  }
}

A travers cet article, nous comprenons que les deux préprocesseurs permettent :

  • de gagner du temps
  • d’écrire un code facilement lisible en évitant les répétitions
  • de bénéficier de feuilles de styles facilement modifiables

Notez que le préprocesseur LESS est vieillissant et relativement lent car il interprète toutes ses variables avant de commencer à créer les règles CSS.

 

Voici un tableau récapitulatif des points forts et des points faibles des deux préprocesseurs : 

SASS (Compass) LESS Notre opinion
Installation Nécessite obligatoirement l’installation de Ruby Plusieurs options d’installation Less gagnant
Extensions La plus connue est Compass mais il en existe d’autres. Compass centralise beaucoup de choses. Sa documentation en ligne est très bien faite. Nombreuses, proposées par différents développeurs : nécessite parfois de nombreuses recherches. Tout n’est pas centralisé dans la même extension. Sass gagnant
Utilisations des variables Déclaration et utilisation avec : $nomDeVariable Déclaration et utilisation avec : @nomDeVariable ex-aequo
Ecriture et utilisation de Mixins Déclaration avec @mixin Utilisation avec @include Déclaration et appel tel une classe CSS Risque de confusions Sass gagnant
Imbrication Oui Oui ex-aequo
Partage de propriétés @extend Non Sass gagnant
Fonctions mathématiques et manipulation de nombres Arithmétique de base, Unité complexes, Tables de conversion Arithmétique de base Sass gagnant
Manipulation de couleurs Oui Oui, grâce à une extension particulière ex-aequo
Structures conditionnelles et boucles Oui Non Sass gagnant

A travers ce tableau comparatif, nous en déduisons que SASS est plus puissant que LESS. En termes de lisibilité, nous trouvons que SASS est peut-être un peu « verbeux » mais plus simple à comprendre, à lire et à écrire. En effet, le fait de devoir utiliser des termes précis permet de mieux appréhender la syntaxe de SASS, contrairement à celle de LESS : toutes les déclarations sont semblables à l’écriture de classe (avec un « . » dans le fichier CSS)

Less.js

0

LESS est un outil JavaScript qui permet de créer dynamiquement des feuilles de style.

Il est basé sur du CSS, mais permet l’utilisation de variables simples, de variables complexes (mixins), l’héritage, la création de fonctions, etc.

 

Pour convertir une feuille LESS à un format CSS valide, il faudra utiliser un compilateur. Pour ce faire, plusieurs solutions sont possibles.

 

Solution 1 – Mise en place côté client

 

La méthode la plus directe, et la plus rapide, est d’inclure un fichier JavaScript après le fichier CSS dans le document HTML.

Pour mettre en place cette solution, il faut d’abord inclure le fichier LESS dans le document HTML. Notez l’attribut rel de la balise link.

 

<link rel="stylesheet/less" type="text/css" href="monStyle.less">

 

Puis faites appel au fichier less.js (disponible ici):

 

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

 

Cette solution n’est peut-être pas la plus efficace car le JavaScript doit analyser tout le contenu du fichier LESS pour le compiler. Plus le fichier est gros, plus le temps de compilation est long.

 

Solution 2 – Mise en place sur un serveur dédié

 

La solution la plus simple est d’utiliser Node.js (disponible ici) qui permet d’exécuter du code JavaScript côté serveur.

Cette solution permet de compiler le fichier .less en fichier .css en utilisant les ressources serveur plutôt que celles client. Vous pourrez permettre aux internautes de visualiser votre page correctement, même s’ils ont désactivé JavaScript.

Sachez que l’installation de Node.js est dépendante du serveur : si vous installez Node, vous installerez l’intégralité du framework.

Pour installer LESS côté serveur, tapez la commande suivante dans la console SSH :

 

$ npm install –g less

 

Après l’installation, LESS est utilisable en important, dans votre code, son module et en utilisant le compilateur :

 

var less = require(‘less’) ;

less.render(style,callback) ;

 

Solution 3 – Mise en place côté serveur

 

Cette solution utilise le script LessPHP (disponible ici). Le fichier téléchargé est à inclure sur votre serveur.

De la même manière que les solutions JS, le script PHP va lire le fichier .less, le compiler et créer le fichier CSS valide. Pour utiliser cette solution, il faut inclure le fichier dans la page puis définir le fichier d’entrée (.less) et le fichier de sortie (.css) :

 

require 'lessc.inc.php';
try {
    lessc::ccompile('monStyle.less', 'styleCompile.css');
} catch (exception $ex) {
    exit('lessc fatal error:<br />'.$ex->getMessage());
}

 

Vous pouvez ensuite faire appel au fichier CSS compilé :

 

<link rel="stylesheet" type="text/css" href="styleCompile.css" />

 

Solution 4 – Compilation locale

 

Cette solution est la plus contraignante car il faut modifier le fichier LESS, qui devra être compilé sur votre ordinateur, et uploader le fichier CSS compilé après chaque modification.

Pour cette solution, vous pouvez utiliser l’outil SimpleLess. Cette technique ne reposant sur aucune technologie, le nombre de requêtes vers votre serveur va être réduite.

Maintenant que vous avez fait votre choix de compilation, nous allons nous pencher sur l’utilisation de LESS.

Basons-nous sur le code suivant :

HTML :

<!doctype html>
<head>
    <link rel="stylesheet/less" type="text/css" href="monStyle.less">
    <script type="text/javascript" src="less-1.3.0.min.js"></script>
</head>
<body>
    <div class="bloc" id="bloc1"></div>
    <div class="bloc" id="bloc2"></div>
</body>
</html>

 

CSS “general.css” :

 

.bloc {
    width:100px;
    height:50px;
    background:#cccccc;
    margin:20px;
    float:left;
}

 

On obtient :

less_js_image1

Les variables

 

Grâce à LESS, il est désormais possible de créer des variables CSS. C’est un avantage car cela permet de réutiliser plusieurs fois la même valeur et éviter les répétitions. Une variable est déclarée de la manière suivante : @nomVariable.

Dans le fichier .less la syntaxe sera la suivante. Nous nous baserons sur l’exemple ci-dessus pour changer la couleur des deux blocs :

 

@couleurParDefaut : #cccccc;
@nouvelleCouleur : #bbe2f2;
.bloc {background:@nouvelleCouleur;}

 

Après compilation, le CSS externe nommé « custom.css » obtenu sera :

 

.bloc 
{
    background:#bbe2f2;
}

 

Le résultat obtenu sera :

less_js_image2

Les Mixins

 

Les mixins sont semblables aux variables mais elles peuvent contenir plusieurs propriétés ou valeurs.

Dans le fichier .less la syntaxe sera la suivante. Nous nous baserons sur l’exemple ci-dessus pour changer la forme d’un des deux blocs :

 

.border-radius(@radius){
	Border-radius :@radius ;
	-moz-border-radius@radius;
	-webkit-border-radius :@radius ;
}

#bloc1{. border-radius(4px) ; }

 

Après compilation du fichier .less, le css custom obtenu sera :

 

#bloc1{

Border-radius :4px;

                -moz-border-radius :4px;

                -webkit-border-radius :4px;

}

 

Le résultat obtenu sera :

 

less_js_image3

 

L’héritage

 

L’avantage de l’héritage avec LESS est que cela permet d’avoir un code moins répétitif et plus clair.

Exemple d’un code sans LessPHP :

 

#content1 #bloc1 p, #content1 # bloc2 p, #content1 # bloc3 p, #content1 #bloc4 p{

                color :#000 ;

text-decoration :none ;

}

#content1 #bloc1 a, #content1 #bloc2 a, #content1 #bloc3 a, #content1 #bloc4 a{

                color :#fff ;

}

 

Grâce à l’héritage, le code sera écrit de la manière suivante :

 

#content1
{
#bloc1,#bloc2,#bloc3,#bloc4
{
	p
{
color:#000;
text-decoration:none;
}
a
{
		color:#FFF;
}
}
}

 

Mon avis

 

Je trouve que cet outil est très utile. Il permet de simplifier le code CSS en utilisant des variables, fonctions… C’est un gain de temps non négligeable.

Prenons un exemple : imaginez que vous devez changer le style de plusieurs sites, ayant exactement la même structure mais aux couleurs de textes différentes. Vous pourrez donc créer un fichier CSS commun à tous les sites  et un fichier less par site pour traiter les différences de styles.

Cet outil est donc très utile et simple à utiliser. Je vous le recommande !

Visitez le site officiel pour plus d’informations : http://lesscss.org