This month I thought I'd tie-in with our series of Git articles by referring to something I generally store in a Git repository – websites and CMS templates for work. This way I can iterate without worrying about losing previous revisions, and can host the repository on my NAS at home, or my shared web host, making it easier to grab a copy if I'm on a new computer, or in case something goes horribly wrong with my hardware. Instead of running through the same steps on how to create a Git repository from last month, I'm going to focus on setting up SASS (a CSS pre-processor) using Node.js and Grunt. This can be done locally, or on a web host (provided you can install Node.js and npm – check the documentation). Definitions SASS – stands for “Syntactically Awesome Style Sheets”, and is a format you can use to generate typical CSS. However, it provides extra features which makes it easier for the programmer, while still compiling into normal CSS. Such as: functions, variables (i.e. defining colors in the header, so changing the color requires only one change), nesting of selectors, and mixins (mini functions to convert one line of code into many). Also referred to as SCSS.

Ce mois-ci j'ai pensé faire un lien avec notre série d'articles Git en me référant à quelque chose que je stocke généralement dans un dépôt Git - des sites Web et des modèles de CMS pour le travail. De cette façon, je peux faire des essais sans craindre de perdre les révisions précédentes, et je peux héberger le dépôt sur mon NAS à la maison, ou mon serveur Web partagé, ce qui facilite la récupération d'une copie si je suis sur un nouvel ordinateur, ou en cas de grosse panne avec mon matériel. Au lieu de suivre à nouveau les mêmes étapes que le mois dernier pour créer un dépôt Git, je vais me concentrer sur la mise en place de SASS (un pré-processeur CSS) en utilisant Node.js et Grunt. Ceci peut être fait au niveau local ou sur un serveur Web (à condition de pouvoir installer Node.js et npm - consultez la documentation).

Définitions

SASS - signifie « Syntactically Awesome Style Sheets » [Ndt : feuilles de style syntaxiquement impressionnantes] et c'est un format que vous pouvez utiliser pour générer du CSS standard. Cependant, il fournit des fonctionnalités supplémentaires qui facilitent la vie du programmeur, tout en compilant en CSS normal. Notamment : des fonctions, des variables (par exemple la définition des couleurs dans l'en-tête, ce qui fait qu'un changement de couleur ne nécessite qu'une seule modification), l'imbrication des sélecteurs et des « mixins » (mini-fonctions pour convertir une ligne de code en un grand nombre). On parle aussi de SCSS.

Node.js – “Is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications” (their Website). It's essentially a platform for running JavaScript programs without requiring something like Apache (or, at least, that's how I'd describe it). NPM – Node Packaged Modules (essentially a repository for Node applications). Grunt - “The JavaScript Task Runner” - this is essentially a file and folder watcher, that executes user-defined commands when something changes. I typically use it only for compiling SASS into CSS files, but it could do much more.

Node.js - « c'est une plateforme basée sur l'exécution du JavaScript de Chrome pour construire facilement des applications en réseau, rapides et évolutives » (leur site Web). C'est essentiellement une plateforme pour exécuter des programmes JavaScript sans exiger quelque chose comme Apache (ou, du moins, c'est ainsi que je la décrirais).

NPM - « Node Packaged Modules » (essentiellement un dépôt pour les applications Node).

Grunt - « L'exécuteur de tâches JavaScript » - c'est essentiellement un surveillant de fichiers et dossiers, qui exécute les commandes définies par l'utilisateur quand quelque chose change. Je l'utilise seulement pour compiler du SASS en fichiers CSS, mais il pourrait faire beaucoup plus.

Prerequisites (tested in 14.04) Install Node.js and NPM: sudo apt-get install nodejs npm ruby-sass ruby-compass Install grunt: sudo npm install -g grunt Connect Node to the expected location (this is caused by the Ubuntu package): sudo ln -s /usr/bin/nodejs /usr/bin/node

Pré-requis (testés avec la 14.04)

Installer Node.js et NPM :

sudo apt-get install nodejs npm ruby-sass ruby-compass

Installer grunt :

sudo npm install -g grunt

Connecter Node à l'emplacement attendu (cela à cause du paquet Ubuntu) :

sudo ln -s /usr/bin/nodejs /usr/bin/node

Note: You may need to run the npm commands as root. Doing so should not cause any issues. Second note: Grunt is not the only way to compile SASS files, so if you're using a framework or starter theme that doesn't use Grunt, you'll either need to configure it from scratch, or else follow that framework's specific documentation. Getting started (from scratch) Make sure you're currently working from the root directory of your project or template (i.e. the folder where the css and sass folders are).

Remarque : vous devrez peut-être exécuter les commandes npm en tant que root. Cela ne devrait pas causer de problèmes.

Deuxième remarque : Grunt n'est pas la seule façon de compiler des fichiers SASS, donc si vous utilisez un environnement de développement ou un thème de démarrage qui n'utilise pas Grunt, vous devrez soit le configurer à partir de zéro, soit suivre sa documentation spécifique.

Mise en route (à partir de zéro)

Assurez-vous que vous travaillez actuellement à partir du répertoire racine de votre projet ou modèle (c'est-à-dire le dossier où le css et les dossiers SASS se trouvent).

Create a file called package.json that contains the following (or run npm init): http://pastebin.com/qPMrRMNW Naturally, you'll want to adjust some of the fields for your project. If you want to add dependencies while installing modules, run the command: npm install <module> –save-dev Replace <module> with the actual name of the module (i.e. grunt). Install the modules required in packages.json by running the following in the project folder: npm install

Créez un fichier package.json qui contient les éléments suivants (ou exécutez npm init) : http://pastebin.com/qPMrRMNW

Naturellement, vous aurez envie d'adapter certains champs pour votre projet. Si vous voulez ajouter des dépendances lors de l'installation des modules, exécutez la commande :

npm install <module> –save-dev

Remplacez <module> par le nom réel du module (par exemple grunt).

Installez les modules nécessaires dans packages.json en exécutant la commande suivante dans le dossier du projet :

npm install

For SASS, you'll also need to install grunt-contrib-sass and grunt-contrib-watch. Create your Gruntfile (either Gruntfile.js or Gruntfile.coffee). The file I typically use, is: http://pastebin.com/dWZUsvJn The format of the folders then falls into: app/assets/css, app/assets/src/scss, app/assets/src/js. Any other folders can be fairly easily read from the Gruntfile (or added). The way the Gruntfile works is that you define objects for various sections of your project – for example the project object contains the paths to each section of your app folder (and they can be referenced with project.app, for example). The banner is typically used to create those commented headers in open source projects – where the author, project and license is listed. These are pulled from the package.json file (stored in the object pkg). If the information doesn't exist, it will simply leave it blank. As such, the banner in this file contains all the information a full project would typically have, as it will work fine with less information – that way I have one file for any kind of project.

Pour SASS, vous aurez également besoin d'installer grunt-contrib-sass et grunt-contrib-watch.

Créez votre Gruntfile (soit Gruntfile.js soit Gruntfile.coffee). Voici le fichier que j'utilise habituellement : http://pastebin.com/dWZUsvJn

Le format des dossiers est alors : app/assets/css, app/assets/src/scss, app/assets/src/js. Tous les autres dossiers peuvent être assez facilement lus à partir du Gruntfile (ou ajoutés).

La façon dont le Gruntfile fonctionne est que vous définissez des objets pour différentes sections de votre projet - par exemple l'objet projet contient les chemins d'accès à chaque section de votre dossier d'application (et ils peuvent être référencés par project.app, par exemple). La bannière est généralement utilisée pour créer les en-têtes commentés dans les projets open source - où l'auteur, le projet et la licence sont répertoriés. Ceux-ci sont tirés du fichier package.json (stocké dans le pkg de l'objet). Si l'information n'existe pas, elle sera tout simplement laissée vide. En l'occurrence, la bannière dans ce fichier contient toutes les informations qu'un projet complet aurait habituellement, même si cela fonctionnerait très bien avec moins d'informations ; ainsi, j'ai un seul fichier pour tout type de projet.

The sass section is relatively standard – this defines where the css files will go, that it is using the expanded style when in development (this means the file is not minified and all line breaks and spacing are intact). The dist (for distribution) uses the compressed style. Compass is enabled in both (Compass is a CSS authoring framework). You can leave it disabled, and avoid installing ruby-compass at the beginning of this file. However, you may eventually run into errors. You can also define an uglify object using grunt-contrib-uglify to minify JavaScript files. More information can be found here: https://github.com/gruntjs/grunt-contrib-uglify

La section saas est relativement standard : elle indique où iront les fichiers CSS, que, en cours de développement, on utilise le style élargi (cela signifie que le fichier n'est pas « minifié » et que tous les sauts de ligne et espacements sont intacts). La dist (pour distribution) utilise le style compressé. Compass est activé dans les deux cas (Compass est un environnement de création de CSS). Vous pouvez le laisser désactivé et éviter l'installation de ruby-compass au début de ce fichier. Cependant, vous pourriez rencontrer des erreurs à la longue.

Vous pouvez également définir un objet « uglify » en utilisant grunt-contrib-uglify pour rapetisser les fichiers JavaScript. Vous trouverez plus d'informations ici : https://github.com/gruntjs/grunt-contrib-uglify

As the Gruntfile by default runs sass:dev (with expanded styles), you can run sass:dist yourself with the following command: grunt sass:dist This will then create a compressed css file, for use in a production environment. Getting started (using a framework or starter theme that uses Grunt) Go to the directory of the Framework/Theme. Run: npm install Run: grunt

Puisque le Gruntfile par défaut exécute sass:dev (avec les styles étendus), vous pouvez exécuter sass:dist vous-même avec la commande suivante :

grunt sass:dist

Ceci créera alors un fichier css compressé, à utiliser dans un environnement de production.

Mise en route (à l'aide d'un environnement ou d'un thème de démarrage qui utilise Grunt).

Allez dans le répertoire de l'environnement ou du thème.

Exécutez : npm install

Exécutez : grunt

Start editing SASS files and let grunt do its work! The Styles As an example of what SASS can do, I've created this file: http://pastebin.com/Wr0LmTXF This is then compiled into normal css, as seen in this file: http://pastebin.com/ruUSfVKs What you might notice is that it even converted the specified hex values for the colors into the CSS keywords “black” and “white”, and that the mixin created all the lines of code for all browsers using the correct values and format. This means, if you need to use various gradients, it cuts down on how much you need to repeat yourself.

Commencez à éditer les fichiers SASS et laissez grunt faire son travail !

Les styles

Comme exemple de ce que peut faire SASS, j'ai créé ce fichier : http://pastebin.com/Wr0LmTXF

Il est ensuite compilé en css normal, comme on le voit dans ce fichier : http://pastebin.com/ruUSfVKs

Vous pourrez remarquer qu'il a même converti les valeurs hexa spécifiées pour les couleurs en mots-clés CSS « black » et « white », et que le « mixin » a créé toutes les lignes de code pour tous les navigateurs en utilisant les valeurs et le format corrects. Cela signifie que, si vous avez besoin d'utiliser différents gradients, moins de répétitions seront nécessaires.

It illustrates what a mixin is (linear-gradient), how to use it (@include), and defining variables in SASS. As well as a normal body selector. You can also nest items inside a body, or define different versions of it, such as :hover. body { a { &:hover { } } } Hopefully this article has piqued your interest in SASS. If there is any interest in another article on SASS specifically, feel free to email me at lswest34+fcm@gmail.com. If you have any questions, corrections, or requests, you are also more than welcome to send me a quick email.

Cela illustre ce qu'est un « mixin » (linear-gradient), comment l'utiliser (@include), et la définition de variables dans SASS. Ainsi qu'un sélecteur normal du body. Vous pouvez également imbriquer des articles dans le body, ou définir différentes versions de celui-ci, tel que :hover.

body {

a {
	&:hover {

	}
}

}

J'espère que cet article a éveillé votre intérêt pour SASS. Si vous voulez un autre article spécifiquement sur SASS, n'hésitez pas à m'envoyer un courriel (en anglais) à lswest34+fcm@gmail.com. Si vous avez des questions, des corrections ou des demandes, vous êtes également plus qu'encouragés à m'envoyer un rapide message.