Différences

Ci-dessous, les différences entre deux révisions de la page.

--- issue87:command_conquer [2015/01/10 00:22] – d52fr
+++ issue87:command_conquer [2015/01/10 17:49] (Version actuelle) – [10] auntiee
@@ Ligne 6: / Ligne 6: @@
 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).
+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. Par exemple : 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.
+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.
 ====== 2 ======
@@ Ligne 20: / Ligne 20: @@
 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, au moins, c'est ainsi que je la décris).
+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).
@@ Ligne 42: / Ligne 42: @@
 sudo ln -s /usr/bin/nodejs /usr/bin/node**
-Pré-requis (testés avec 14.04)
+Pré-requis (testés avec la 14.04)
 Installer Node.js et NPM :
@@ Ligne 112: / Ligne 112: @@
 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 je utilise habituellement : http://pastebin.com/dWZUsvJn
+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 ces 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.
+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.
 ====== 7 ======
@@ Ligne 124: / Ligne 124: @@
 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, qu'on utilise le style élargi en cours de développement (cela signifie que le fichier n'est pas « minifié » et que tous les sauts de ligne et espacements sont intacts). Le 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 peut-être rencontrer des erreurs.
+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'information ici : https://github.com/gruntjs/grunt-contrib-uglify
+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
 ====== 8 ======
@@ Ligne 144: / Ligne 144: @@
 Run: grunt**
-Comme le Gruntfile par défaut exécute sass:dev (avec les styles étendus), vous pouvez exécuter sass:dist vous-mêmes avec la commande suivante :
+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
@@ Ligne 150: / Ligne 150: @@
 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)
+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.
@@ Ligne 178: / Ligne 178: @@
 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, cela réduit l'obligation de vous répéter.
+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.
 ====== 10 ======
@@ Ligne 194: / Ligne 194: @@
 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. Qinsi 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, tels que :hover.
+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 {
@@ Ligne 204: / Ligne 204: @@
 }
-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.
+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.