Posts taggés Compass

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)

sass_et_compass

Sass et Compass

3

Véritable référence en matière de développement web et de boîte à outils complète pour le CSS3, Sass et Compass vous permettront de créer des feuilles de styles plus facilement maintenables. Il existe deux principaux Frameworks CSS : Less dont nous vous avons déjà parlé et Compass dont nous parlerons ici.

Sass est un préprocesseur CSS stable offrant de nombreuses fonctionnalités et permettant de coder vos feuilles SCSS, de les interpréter et de compiler la syntaxe. Compass est le Framework qui vient en complément de Sass et qui offre un ensemble de fonctions réutilisables afin de palier à certains problèmes de compatibilités navigateurs.

L’utilisation de ce Framework vous facilitera la création d’un site ou d’une application tout en gagnant du temps.

 

Installation

Tout d’abord, si ce n’est pas déjà fait, vous devez installer Ruby sur votre ordinateur. Une fois téléchargé, lancez l’installation. Lorsque vous tombez sur cette fenêtre :

 

install_ruby

 

Veillez à cocher la case « Add Ruby Executables to your PATH ».

Si Ruby est déjà installé sur votre machine, assurez-vous d’avoir la dernière version à jour.
Pour cela : ouvrez l’invite de commande (Menu démarrer > Accessoires > Invite de commandes) puis taper :

gem update --system

 

Lorsque Ruby est installé ou à jour, il faut installer Compass.

Vous n’avez pas besoin d’installer Sass séparément car, en installant Compass, toutes ses dépendances seront installées.

Ouvrez l’inviter de commande  (Menu démarrer > Accessoires > Invite de commandes) en mode administrateur .
Procédez d’abord à l’installation de Sass :

gem install sass

Puis, installez compass:

gem install compass

 

L’installation de Compass se déroule.

invite_commandes_compass

L’installation est maintenant terminée ! Nous pouvons passer à la suite.

 

 

Création d’un nouveau projet

La création d’un projet avec Compass se déroule via l’invite de commande grâce à l’instruction suivante :

compass create nom-du-projet


Attention
, veillez à vous positionner sur l’emplacement où vous souhaitez créer votre projet, sinon il se créera, par défaut, dans le dossier utilisateur Windows (sur le disque local C:\Utilisateurs\nom-utilisateur).

Astuce : lorsque vous voulez créer votre projet à un endroit précis, par exemple dans le dossier « Projets», placez votre souris sur le dossier concerné, maintenez la touche « shift », effectuez un clic droit puis cliquez sur « Ouvrir une fenêtre de commandes ici ».

menu_contextuel

Vous pourrez ensuite créer votre « Projet Toto » dans le dossier « Projets » en exécutant la commande :

compass create ProjetToto.

Vous remarquerez ensuite que différents répertoires et fichiers ont été créés.

creation_rep_et_fichiers

Le répertoire « .sass-cache » est un cache utile à la compilation des fichiers ; « config.rb » est le fichier de configuration du projet. Il ne faut pas y toucher ni les supprimer.

 

Le répertoire « sass » est destiné à accueillir les fichiers d’édition (.scss) sur lesquels vous travaillerez ; le dossier « stylesheets » recevra toutes les feuilles CSS générées par le Framework (et vous n’y toucherez pas 🙂 ).

Par défaut, vous trouverez dans chacun de ces deux dossiers, les fichiers « ie », « print » et « screen ». Si vous ne souhaitez pas travailler à partir de ces fichiers, vous pouvez les supprimer.

 

Le cas d’un projet existant

Via l’invite de commandes, placez-vous sur le dossier contenant vos fichiers projets.

N’oubliez pas notre petite astuce ( pour créer votre projet ) qui vous simplifiera la vie 🙂

Lorsque votre dossier est ciblé dans la console, tapez l’instruction suivante :

compass create --bare --sass-dir "sass" --css-dir "css"

 

Expliquons un peu cette instruction :
– « compass create » est l’instruction pour créer le projet compass, comme vu précédemment.
– « –bare » empêche la création des dossiers et fichiers par défaut.
– « –sass-dir   » sass  » » permet de créer un dossier «sass » qui se trouvera à la racine du projet et qui accueillera tous les fichiers .scss.
– « –css-dir  » css  » » définit le répertoire qui contiendra les fichiers CSS générés du projet. Si le dossier existe déjà, il est simplement renseigné dans le fichier de configuration. Si vous avez déjà des CSS dans ce dossier, ne vous inquiétez pas, elles ne seront pas écrasées.

 

confirm_install_ok

 

 

Au boulot !

Avant de vous lancer tête baissée dans une intégration de projet en utilisant Compass, sachez que vous ne travaillerez que sur les fichiers .scss que vous placerez dans le dossier sass de votre projet.

S’il vous plaît, un peu d’organisation !!!

Sass vous permet d’utiliser les @import autant que vous le désirez et donc de créer autant de fichier .scss que vous le souhaitez. Ainsi, vous n’aurez plus besoin de parcourir vos feuilles de styles interminables pour rechercher tel ou tel élément.

Réfléchissez donc à la manière dont vous pourriez organiser votre intégration, par exemple :

/_variables.scss
/_header.scss
/_footer.scss
/_home.scss
/style.scss

 

Veillez à mettre un underscore (_) devant les fichiers scss que vous ne voulez pas compiler en fichier CSS. Ils seront accessibles grâces aux @import.

Votre fichier principal style.scss contiendra le code suivant :

@import "variables";
@import "header";
@import "footer";
@import "style";

 

Lorsque vos premiers fichiers sont créés, exécutez la commande compass watch dans l’invite de commande. Cette instruction permet d’automatiser la compilation des fichiers CSS à chaque modification effectuée dans l’un des fichiers .scss.

Utiliser des variables et les mixins proposées : un réel gain de temps

Afin de disposer de l’ensemble des mixins proposées, importez-les dans vos fichiers .scss de la manière suivante :

@import "compass";

 

Voici un exemple d’utilisation possible des mixins de compass dans un fichier .scss :

@import "compass" ;

.btn{
	@include border-radius(15px) ;
}

Au lieu de l’écriture suivante dans un fichier .css :

.btn{
	border-radius: 15px 15px 15px 15px;
    	-moz-border-radius: 15px 15px 15px 15px;
	-o-border-radius: 15px 15px 15px 15px;
    	-webkit-border-radius: 15px 15px 15px 15px;
}

 

Pensez à déclarer des variables pour stocker des informations que vous allez réutiliser tout au long de votre intégration. Vos variables sont déclarées de la manière suivante :

$nomVariable

 

Par exemple, vous pouvez combiner vos variables avec les mixins :

@import "compass" ;

$radius : 15px ;
$couleurRouge : red ;

.btn{
	@include border-radius($radius) ;
	background-color:$couleurRouge ;
}

 

Osez l’imbrication !

@import "compass" ;

$radius : 15px ;
$couleurGris : #f0f0f0;
$noir:#000 ;

nav{
	margin : 0 ;

	ul{
		list-style-type:none ;

		li{
			@include border-radius($radius) ;
			background-color:$couleurGris ;
			display:inline-block ;
		}

	}

	a{
		color:$noir ;
	}
}

 

Vous remarquerez que les balises sont imbriquées les unes dans les autres. Nous trouvons que c’est une bonne façon d’organiser vos fichiers .scss car ils sont plus lisibles.

Lorsque votre CSS est généré, vous obtiendrez le code suivant :

nav{
	margin : 0 ;
}

nav ul{
	list-style-type:none ;
}

nav ul li{

	border-radius: 15px 15px 15px 15px;
    	-moz-border-radius: 15px 15px 15px 15px;
    	-webkit-border-radius: 15px 15px 15px 15px;
	background-color:#f0f0f0 ;
	display:inline-block ;
}

nav a{
	color:#000 ;
}

 

Attention à ne pas abuser de l’imbrication afin de laisser un code css réutilisable pour l’ensemble de votre site.

Le partage de propriétés

Sass vous offre la possibilité de partager un ensemble de propriétés CSS à un autre sélecteur. Pour cela, il faut utiliser :

@extend

 

Voici un exemple :

@import "compass" ;

$radius : 15px ;
$couleurGris : #f0f0f0;
$noir:#000 ;

.message{
	color:$noir ;
	border:1px solid $noir ;
	font-size:1.4em ;
	@include border-radius($radius) ;
	text-transform:uppercase ;

}

.error{
	@extend .message ;
	border-color:red ;
	color :red ;
}

Et son code css généré :

.message, .error{
	color:#000 ;
	border:1px solid #000 ;
	font-size:1.4em ;
	border-radius: 15px 15px 15px 15px;
    	-moz-border-radius: 15px 15px 15px 15px;
    	-webkit-border-radius: 15px 15px 15px 15px;
	text-transform:uppercase ;
}

.error{
	border-color:red ;
	color :red ;
}

 

On remarque bien que les propriétés appliquées à .message sont également appliquées à .error.

Un peu de Maths

Enfin, Sass vous offre la possibilité de faire des Maths dans vos feuilles CSS. En effet, le langage dispose de nombreux opérateurs mathématiques standards comme : + , – , * , /  et %.

Vous pourrez maintenant calculer des positions, des largeurs ou d’autres choses dans vos fichiers scss !

article [role = "main"] {
 	float: left;
 	width: 600px / 960px * 100%;
 }

 

Vous obtiendrez dans votre fichier CSS :

 article [role = "main"] {
 	float: left;
 	width: 62,5%;
 }

 

Retrouvez l’ensemble des mixins proposées par Compass ici : http://compass-style.org/index/mixins/ et l’ensemble des fonctions de Sass ici : http://compass-style.org/index/functions/

 

 

Alors, quel intérêt d’utiliser Compass ?

Grâce à ce préprocesseur, vous pouvez créer plusieurs fichiers .scss. Cela vous permet d’être mieux organisé dans votre processus d’intégration : par exemple _header.scss sera le fichier spécifique au header de votre site, _footer.scss contiendra tous les styles de votre footer, etc.

Le fait d’utiliser de multiples fichiers .scss, bien nommés et ciblés, permet de simplifier la maintenance de votre site. Vous gagnerez du temps à effectuer certaines modifications grâce aux variables et vous n’aurez (si vous le désirez) qu’un seul fichier CSS final, dans lequel vous ne mettrez jamais le nez puisque vous travaillerez sur les .scss, bien découpés 😉

Chaque modification effectuée et sauvegardée est automatiquement générée sans avoir besoin de s’en soucier.

Nous mettons en place Sass et Compass sur chaque projet que nous réalisons. Nous gagnons donc énormément de temps en intégration et terminées les recherches d’éléments précis dans un fichier CSS de 4000 lignes ! 🙂