Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • labo_linux
issue87:command_conquer

Différences

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

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue87:command_conquer [2015/01/08 21:04] – [4] fredphil91issue87: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.** 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 Définitions
  
-SASS - signifie « Syntactically Awesome Style Sheets » [Ndt : feuilles de style syntaxiquement impressionnantes] et 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 ====== ====== 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.** 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). 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** 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 : Installer Node.js et NPM :
Ligne 87: Ligne 87:
  
 npm install** 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
  
 ====== 6 ====== ====== 6 ======
Ligne 97: Ligne 109:
  
 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.** 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.
  
 ====== 7 ====== ====== 7 ======
Ligne 103: Ligne 123:
  
 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** 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
  
 ====== 8 ====== ====== 8 ======
Ligne 119: Ligne 143:
  
 Run: grunt** 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
  
 ====== 9 ====== ====== 9 ======
Ligne 131: Ligne 169:
  
 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.** 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.
  
 ====== 10 ====== ====== 10 ======
Ligne 145: Ligne 193:
  
 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.** 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.
 +
issue87/command_conquer.1420747444.txt.gz · Dernière modification : 2015/01/08 21:04 de fredphil91