Sass – La compilation et les outils disponibles
Article 7 sur 9 de la série: Comprendre et utiliser Sass
- Paramétrer Sass avec Compass
Bien que la librairie Compass ne soit plus maintenue, nous allons explorer une approche qui l’utilise et nous permet de continuer à en profiter sans compromettre nos productions.
- Travailler sa maquette avec Sass et Susy
Afin de mieux comprendre la mise en œuvre de tout ce que nous avons vu jusqu’à présent, y compris l’utilisation de Sass, nous allons déployer un véritable flux de travail en s’appuyant sur la mise en place d’un site.
- Premiers pas et premiers fichiers Sass
Après avoir vu tous ces concepts qui gravitent autour de Sass, il est important de mettre à plat et d’établir nos premiers fichiers et nos premières lignes de code afin de mettre tout cela en activité.
- Comment répartir ses fichiers partials sous Sass
SassScript va bien au-delà de l’utilisation simple de variables ou de mixin, nous allons explorer la mise en place d’un modèle assez complet pour concevoir notre développement de site ou d’application.
- Déployer Sass de manière efficace
Depuis la démocratisation et l’utilisation des préprocesseurs, différents concepts, principalement basés sur la programmation orientée objet, ont émergés et nous permettent d’aborder Sass d’une manière très modulaire.
- Installer et préparer Sass pour la production
Travailler sous Ruby nous apporte une véritable panoplie d’outils que nous avons sous la souris. Voyons comment installer ces différentes facettes qui peuvent nous être très utiles.
- Sass – La compilation et les outils disponibles
Bien que Ruby soit une approche très ouverte et évolutive, il existe différentes façons de compiler Sass dans CSS, et chaune peut présenter ses intérêts et ses avantages.
- Qu’est ce que Sass – Introduction et présentation
Qu’est-ce qu’un préprocesseur et ce qu’est Sass? Cet article présente les concepts de base et définis ce qu’on peut attendre d’une telle technologie.
- Comprendre et utiliser Sass
Cette série ne couvre pas la syntaxe de Sass, mais examine comment utiliser Sass et des concepts qui nous permettent d’exploiter au mieux les possibilités offertes par Sass.
Afin d’obtenir du CSS traditionnel, et que les fichiers Sass soient écrits en Sass ou en SCSS, il faut les compiler. Pour cela nous avons diverses possibilités que nous allons explorer au cour de cet article.
Notez au passage, que lorsque nous sommes en phase d’expérimentation, ou, en mode développement, il est parfois bien pratique d’avoir sous la main un compilateur autonome, et en ligne.
$couleur: #363;
.uneclasse {
color: $couleur;
}
Voyez ce qui se passe dans la partie de droite. N’hésitez pas à affiner les paramètres d’utilisation, en fonction de vos besoins, depuis le menu Options.
De manière plus stable et plus large, vous pouvez également employer des outils qui vont directement s’intégrer dans votre flux de travail. En fonction de vos besoins, vous allez avoir accès à diverses solutions.
Sous Ruby
À la base Sass étant écrit en Ruby, il peut paraître naturel de l’employer avec cet environnement.
Sous Mac, Ruby est déjà présent de manière native, sous Windows, il faut l’installer, et vous trouverez toutes les versions, et packages nécessaires, depuis le site Ruby Installer.
Ensuite, quel que soit votre environnement, pour installer Sass, cela se passe en ligne de commande, et de la même manière
gem install sass
Certainement, que sous Mac, il vous faudra user d’un sudo. Mais voilà c’est tout… il n’y a pas besoin de plus d’étapes ni d’installation.
Vous trouverez une vidéo présentant ces installations ; sous Windows Installation et prise en main de Sass et Compass et sous MacOsx Installation de Compass sous Mac OS X.
Une fois installé, et pour tester le bon fonctionnement, rien de plus simple.
Déplacer votre ligne de commande en pointant sur le dossier de travail que vous souhaitez.
Dans ce dossier, créez un fichier test.scss qui contient le fragment de code ci-dessous puis enregistrez le.
$couleur: #363;
.uneclasse {
color: $couleur;
}
Depuis la ligne de commande, saisissez l’instruction suivante ;
sass test.scss styles.css
Une fois validé, le fichier styles.css devrait être généré et contenir du code CSS standard.
Afin de ne pas devoir continuellement lancer l’instruction de compilation, il est préférable de demander à Sass, ou à compass si vous l’avez également installé, de surveiller le dossier de travail en question, et, de compiler à chaque fois que l’on enregistre un quelconque document *.scss.
Pour cela il suffit d’entrer cette commande et de la valider ;
sass --watch dossiersources/sass:dossierdestination/css
Du coté de Sass, le premier chemin d’accès, dossiersources/sass, correspond à l’emplacement des fichiers sources (.scss ou .sass) et le second chemin dossierdestination/css, spécifiant le dossier de destination des fichiers compilés (.css). Il faut séparer les deux chemins par deux points :
Bien que cela ne soit pas obligatoire, si vous travaillez sous Ruby, l’installation de compass peut être très intéressante, ne serait que pour la gestion des projets, et notamment au travers de son fichier de configuration config.rb
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "libs"
fonts_dir = "fonts"
relative_assets = true
line_comments = false
output_style = :compressed
Donc si vous travaillez avec Compass, du fait que le dossier source (sass_dir) et le dossier de destination (css_dir) sont déjà définis, vous pouvez simplement demander la surveillance du dossier en cours depuis la console de commande
compass watch
LibSass
Si vous ne souhaitez pas avoir recours à l’installation de Sass sous Ruby, vous pouvez simplement employer LibSass qui est une librairie développée en C/C++ et que vous allez pouvoir utiliser depuis l’environnement de votre choix au travers d’un wrapper.
Du fait du grand nombre de wrappers disponibles, nous n’aborderons pas ici leurs installations, ni leurs utilisations. Cependant, sachez que cette librairie est utilisée par des éditeurs de code brackets-sass… pour ne citer que lui.
Faites attention aux éventuels amalgames, car notepadd++ ne fait que colorer la syntaxe scss, et que Dreamweaver se base directement sous Ruby.
Mais pour chacune des implémentations précédentes, notez que le github ad hoc vous propose une rubrique, Getting Started, qui vous permet de prendre en main rapidement la mise en place du compilateur de votre choix.
Sous PHP
Bien que cela sorte de l’approche Node, il est possible d’opter pour une alternative qui consiste à ne pas générer la compilation coté client.
On place, donc, directement l’ensemble des fichiers sources nécessaires sur le serveur, qui les compilera à la demande lors de la distribution des pages.
Plusieurs possibilités :
- scssphp, très complet et qui embarque SCSS 3.2.12
- php-sass, également complet et basé sur la même distribution de scss, mais s’utilise différemment du précédent
- phamIp, plus ancien et n’a pas été mis à jour depuis quelques années
scssphp
Pour mettre en application ce type d’utilisation, et de flux de travail, nous allons uniquement aborder l’approche faites par scssphp.
Première étape, télécharger les fichiers nécessaires, et décompacter l’archive.
Parmi l’ensemble des fichiers récupérés, seul le fichier scss.inc.php nous sera utile pour ce test.
Commençons par créer le fichier base-1.php qui va contenir la structure HTML. Pour cela, deux simples paragraphes de ‘lorem ipsum’ feront l’affaire. Ajoutons une classe à chacun, respectivement styles-tags et styles-link.
base-1.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
</head>
<body>
<p class="test-tags">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo quidem nulla nam dolorem nobis impedit harum autem, odio praesentium qui iusto perspiciatis. Animi ex atque tenetur accusamus numquam earum quas.</p>
<p class="test-link">Repellendus voluptatibus praesentium, quaerat doloremque, non placeat. Assumenda facilis sint repellendus similique porro nihil quae explicabo eius, distinctio ea expedita, rerum sed nulla, tempora ut maiores a corporis minus deserunt.</p>
</body>
</html>
Il existe diverses manières d’employer le compilateur, nous en approcherons deux.
Pour la première, nous allons directement compiler du CSS au sein de la balise <script> de la page, la seconde consistera à lier, de manière classique, une feuille de style externe au travers d’une balise <link>.
styles-tags.php
<script>
< ?php
require "styles-tags.php";
?>
</script>
<?php
require "scss.inc.php";
$scss = new scssc();
echo $scss->compile('
$coul: blue;
.test-tags {
color: $coul;
}
');
?>
- On importe le fichier téléchargé précédemment,
- Il faut créer une instance de la classe scssc, qui va nous permettre de compiler le scss en css,
- Et enfin au travers d’une simple instruction echo, on écrit le résultat de la compilation. Certes cette compilation est très basique mais cela permet, en usant d’une variable, de vérifier que tout fonctionne bien.
styles-link.php
Pour cette option, nous allons user d’une balise <link>, qu’habituellement nous employons pour lier des fichiers de type CSS.
Hors, cette fois-ci, nous allons devoir compiler, à la volée, du scss en css et la compilation se faisant coté serveur, il va nous falloir créer la feuille de styles CSS en PHP.
<link rel="stylesheet" href="styles-link.php">
< ?php
header("Content-Type: text/css");
require "scss.inc.php";
$scss = new scssc();
echo $scss->compile('
$couleur: orange;
.test-link {
color: $couleur;
}
');
?>
Aller plus loin
Pour en savoir plus sur l’utilisation de ce mode de compilation, n’hésitez pas à consulter la documentation en ligne.
Grunt, Gulp ou NPM
Il arrive fréquemment que, dans nos projets, nous ayons recourt à des automatiseurs de tâches, afin d’optimiser certaines mécaniques comme la concaténation, l’optimisation d’images, la génération de sprites, la minimisation des fichiers, et bien d’autres possibilités.
Nous pouvons, donc, également confier à ces automatiseurs, la tâche de compilation. Que l’on soit plutôt orientés Gulp, Grunt, NPM ou encore directement Node, ce ne sont pas les solutions qui manquent.
Il existe même un parser SCSS pour PostCSS, c’est dire !
Afin de ne pas trop s’éloigner de l’objectif de cet article, je vous propose de nous rapprocher d’une prochaine série d’articles concernant les automatiseurs de tâches, et, de ce fait, de ne pas aborder leur utilisation dans ce présent article.
Applications visuelles
Enfin, pour les plus récalcitrants d’entre nous au code, il existe des solutions embarquées sous forme applicatives, qui peuvent parfois être plus transparentes d’utilisation.
Ainsi nous trouvons Koala, Scout, CodeKit, LiveReload, Hammer, Prepros, Compass.app, Crunch… qui proposent des interfaces conviviales, et intuitives, afin d’inclure rapidement certaines librairies, et de compiler un dossier source vers un dossier de sortie.
Bien sûr, leur extensibilité s’en trouve parfois réduite, mais dans certains cas cela peut être une solution plus souple, que de passer par des lignes de commandes.
Attention également au maintien de l’application dans le temps, certaines solutions peuvent disparaître aussi vite qu’elles sont apparues, ou souvent ne plus être maintenues.
Parfois, même, si celles-ci sont basées sur LibSass, elles peuvent simplement, ne pas suivre les évolutions aussi rapidement, que celles disponibles directement sous Sass.
