Posts taggés Intégration graphique

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)

Picturefill, un plugin intéressant pour les images responsive…

0

…en attendant <picture>…

 

Les media queries permettent de contrôler en responsive les images servies en CSS pour les différentes résolutions des appareils mobile/desktop, mais rien n’a été prévu pour les images servies directement dans le contenu de la page HTML (balise <img>).

mobile

 

Une spécification est en cours au W3C, l’élément picture, qui permettra à l’avenir de régler le problème en permettant de déclarer différentes sources d’images gérées par les media queries au sein même de la balise.

Cela pourrait ressembler à ça :

 

<picture width="500" height="500">
       <source media="(min-width: 45em)" src="large.jpg">
      <source media="(min-width: 18em)" src="med.jpg">
      <source src="small.jpg">
      <img src="small.jpg" alt="">
     <p>Texte accessible</p>
</picture>

 

Une autre spécification concurrente est également en cours : l’attribut srcset, qui s’intègre directement dans la balise déjà existante <img> :

 

<figure>
       <img src="a-rectangle.png" srcset="a-square.png 600w"  alt="Texte alternatif">
       <figcaption>Légende de l’image</figcaption>
</figure>

 

Un groupement de communautés de développeurs a été créé par le W3C, pour permettre à tout développeur d’avoir un endroit où échanger sur les différents sujets des standards. Cela permet également au W3C d’impliquer directement les gens qui font le web, et avoir un retour sur leur vision des choses.

C’est ainsi que le collectif RCIG (Responsive Images Community Group) s’est créé, pour travailler sur les solutions possibles pour les images responsive.

 

C’est cette communauté qui propose l’élément picture, alors que la communauté des développeurs côté navigateurs pousse pour la solution srcset.

Le RCIG, magnanime, a donc proposé un mix des deux spécifications en incorporant l’attribut srcset dans l’élément picture.

 

En attendant, il faut bien trouver des parades sur des projets concrets aujourd’hui, notamment quand les contraintes ne vous permettent pas d’avoir un domaine réservé aux mobiles/tablettes et vous obligent à travailler en mode responsive.

 

Picturefill est un polyfill permettant de tirer parti de cette future spécification. Il émule le comportement de l’élément picture à travers un système de div.

 

<div data-picture data-alt="Texte alternatif">
        <div data-src="small.jpg"></div>
        <div data-src="medium.jpg"     data-media="(min-width: 400px)"></div>
        <div data-src="large.jpg"      data-media="(min-width: 800px)"></div>
        <div data-src="extralarge.jpg" data-media="(min-width: 1000px)"></div>
        <!-- Fallback pour les navigateurs sans JS. Image par défaut. -->
        <noscript>
            <img src="external/imgs/small.jpg" alt="Texte alternatif">
        </noscript>
    </div>

 

Le script génèrera une balise img dans la div data-picture, à la fin de la liste dont la source sera choisie par les media-queries selon la résolution détectée. Il n’y a pas de limite au nombre de versions d’images possibles.

Il est également possible de mettre des commentaires conditionnels IE, si vous souhaitez un ciblage particulier pour Internet Explorer.

 

Vous pouvez tester le script à cette adresse : http://scottjehl.github.io/picturefill/

On peut déjà se rendre compte du principe en redimensionnant la fenêtre du navigateur.

 

Quelques limitations tout de même : le plugin ne  marche que sur les navigateurs comprenant les media queries (exit IE jusqu’au 8). Quand ce n’est pas le cas, c’est la première image de la liste qui sera servie par défaut. Vous trouverez ci-dessous, le tableau récapitulatif des supports :

 

 

Browser

Support Type

Android 1.6 Webkit Full
Android 2.1 Webkit Comment fallbacks used
Android 2.2 Webkit Comment fallbacks used
Android 2.3 Webkit Comment fallbacks used
Android 4.x Webkit Full
iOS 4.3 Safari Comment fallbacks used
iOS 5.0 Safari Full
Opera Mobile Full
Chrome Mac (tested v17) Full
Opera Mac Desktop (tested v11) Full
Firefox Mac Desktop (tested v3.0+) Full
IE 6 Full (*no media query support, though)
IE 7 Full (*no media query support, though)
IE 8 Full (*no media query support, though)
IE 9 Comment fallbacks used
IE 10 Full