Home HTML / CSS Sass et Compass

Sass et Compass

  Mélanie C. Intégrateur graphique 5 min 10 février 2014

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 ! 🙂

3 commentaires
0

Lire les articles similaires

3 commentaires

moi 29 avril 2016 - 15:20 |

article court, clair, interessant, pratique ! merci!!

Répondre
Sylvius Gouba 25 mai 2016 - 16:52 |

Très bon article. J’ai compris en un temps record, en espérant que la pratique soit aussi intéressante. Cependant lors de l’installation de sass et compass j’ai un petit soucis. Sass s’est bien installé sans erreur, mais au tour de compass, il y a une erreur de ce genre: Errno::ETIMEDOUT: Failed to open TCP connection to rubygems.org:443

Je ne sais pas maintenant, si c’est une erreur qui m’empêchera de travailler.

Répondre
Sylvius Gouba 25 mai 2016 - 16:55 |

Juste dire que c’est réglé. J’ai exécuté de nouveau la commande et là tout est bien installé.

Merci 🙂

Répondre

Laisser un commentaire

Social Share Buttons and Icons powered by Ultimatelysocial