Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste :
issue88: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
issue88:command_conquer [2015/01/15 22:52] – [1] fredphil91issue88:command_conquer [2015/01/19 17:06] (Version actuelle) – [8] auntiee
Ligne 7: Ligne 7:
 SASS stands for Syntactically Awesome Style-Sheets, and is a pre-processor for CSS. It essentially adds features to CSS (such as nesting, functions, mixins, imports, custom units, mathematics, inheritance, and variables).** SASS stands for Syntactically Awesome Style-Sheets, and is a pre-processor for CSS. It essentially adds features to CSS (such as nesting, functions, mixins, imports, custom units, mathematics, inheritance, and variables).**
  
-L'article du mois dernier a été consacré à la configuration de grunt et node.js pour permettre la compilation de SASS. Cependant, nous n'avons pas vraiment parlé de SASS. Cet article devrait je l'espère y remédier, car SASS peut être extrêmement utile à tout programmeur web.+L'article du mois dernier était consacré à la configuration de grunt et node.js pour permettre la compilation de SASS. Cependant, nous n'avons pas vraiment parlé de SASS. Cet article devrait, je l'espère, y remédier, car SASS peut être extrêmement utile à tout programmeur Web.
  
-Qu'est-ce que SASS?+Qu'est-ce que SASS ?
  
-SASS signifie « Syntactically Awesome Style Sheets » [Ndt : feuilles de style syntaxiquement impressionnantes], et c'est un pré-processeur pour CSS. Il ajoute ds fonctionnalités à CSS (comme l'imbrication, les fonctions, les « mixins », les importations, les unités de mesure personnalisées, les mathématiques, l'héritage et variables).+SASS signifie « Syntactically Awesome Style Sheets » [Ndt : feuilles de style syntaxiquement impressionnantes], et c'est un pré-processeur pour CSS. Il ajoute des fonctionnalités à CSS (comme l'imbrication, les fonctions, les « mixins », les importations, les unités de mesure personnalisées, les mathématiques, l'héritage et les variables).
  
 ====== 2 ====== ====== 2 ======
Ligne 28: Ligne 28:
  
 ul.menu { li { a{ text-decoration: none; &:hover { background-color: darken($bg-color, 15%);}}}}** ul.menu { li { a{ text-decoration: none; &:hover { background-color: darken($bg-color, 15%);}}}}**
 +
 +Imbrication
 +
 +Imaginez que vous avez deux types de liens sur votre site Web - un style « par défaut » qui devrait être bleu et souligné (les valeurs standard), mais vous avez aussi des liens dans votre menu pour lesquels vous souhaitez supprimer les décorations et ajuster le paramètre :hover pour assombrir la couleur du bouton. En CSS normal, cela pourrait ressembler à ceci :
 +
 +ul.menu li a { text-decoration: none; }
 +
 +ul.menu li a:hover { background-color: #000000; }
 +
 +Avec SASS, vous pouvez faire ce qui suit :
 +
 +$bg-color: #0000FF;
 +
 +ul.menu { li { a{ text-decoration: none; &:hover { background-color: darken($bg-color, 15%);}}}}
  
 ====== 3 ====== ====== 3 ======
Ligne 37: Ligne 51:
 • Using a SASS function called darken, which calculates the value for a darker version of the supplied color. SASS offers many functions, such as the ability to create color values based on hue, saturation and lightness (hsl). • Using a SASS function called darken, which calculates the value for a darker version of the supplied color. SASS offers many functions, such as the ability to create color values based on hue, saturation and lightness (hsl).
 • &:hover - the ampersand essentially places the following text directly behind the parent when nesting. For example ul { .menu{}} would result in ul .menu in normal CSS (in other words, find an element with the class menu after a ul element), and ul { &.menu{}} would result in ul.menu. The second one means “find a ul element with class menu”. Ergo, this example means “find each tag in the menu unordered list, and darken the color when the user hovers over it”.** • &:hover - the ampersand essentially places the following text directly behind the parent when nesting. For example ul { .menu{}} would result in ul .menu in normal CSS (in other words, find an element with the class menu after a ul element), and ul { &.menu{}} would result in ul.menu. The second one means “find a ul element with class menu”. Ergo, this example means “find each tag in the menu unordered list, and darken the color when the user hovers over it”.**
 +
 +Cela semble un peu moins lisible quand on l'écrit sur une seule ligne. Cependant, en le formatant correctement, cela ressemble à ce qui est en haut à droite.
 +
 +Quelques autres choses que je fais dans cet exemple :
 +• Définir une variable (c'est-à-dire la couleur de l'entreprise, ou une couleur primaire dans un modèle). Cette variable peut être utilisée n'importe où dans le fichier SASS. Ainsi, toute modification de la palette de couleurs ne nécessite qu'un seul changement.
 +• Utiliser une fonction SASS appelée darken, qui calcule la valeur pour une version plus sombre de la couleur fournie. SASS propose de nombreuses fonctions, offrant la possibilité de créer des valeurs de couleur en fonction de la teinte, la saturation et la luminosité (HSL).
 +• &:hover - l'esperluette sert essentiellement à mettre le texte suivant directement derrière le parent lors de l'imbrication. Par exemple ul { .menu{}} donnera ul .menu en CSS normal (autrement dit, trouver un élément de la classe menu après un élément ul), et ul { &.menu{}} donnera ul.menu. Ce dernier signifie « trouver un élément ul de la classe menu ». Donc, cet exemple signifie « trouver chaque balise dans la liste non ordonnée menu et assombrir la couleur lorsque l'utilisateur la survole ».
  
 ====== 4 ====== ====== 4 ======
Ligne 44: Ligne 65:
  
 Now, this does look a bit like gibberish. However, the second background: line can safely be ignored if you don’t want to use an SVG colored background in IE9. Everything else is commented to indicate which version of the browser it supports, and the colors supplied in the parameters of the mixin ensure that every gradient looks the same. This is the defined mixin - as such, you need to type it only once. I typically put variables, functions and mixins at the top of the SASS file, but it doesn’t really matter.** Now, this does look a bit like gibberish. However, the second background: line can safely be ignored if you don’t want to use an SVG colored background in IE9. Everything else is commented to indicate which version of the browser it supports, and the colors supplied in the parameters of the mixin ensure that every gradient looks the same. This is the defined mixin - as such, you need to type it only once. I typically put variables, functions and mixins at the top of the SASS file, but it doesn’t really matter.**
 +
 +Mixins
 +
 +Les mixins sont essentiellement des macros, ou des fonctions, qui ne font aucun calcul, mais transforment plutôt une ligne SASS en plusieurs lignes CSS. Un bel exemple est l'utilisation des dégradés CSS. Comme c'est une fonctionnalité mise en œuvre de façon différente par presque chaque navigateur, elle nécessite de nombreuses lignes de code pour assurer que le dégradé apparaît dans tous les navigateurs qui le supportent. Un mixin SASS que j'utilise à cette fin ressemble à l'exemple en haut de la page suivante.
 +
 +Oui, cela ressemble à du charabia. Cependant, le deuxième background: line peut être ignoré si vous ne voulez pas utiliser un fond de couleur SVG dans IE9. Tout le reste est commenté pour indiquer quelle version du navigateur cela supporte, et les couleurs fournies dans les paramètres du mixin assurent que chaque gradient se ressemble. C'est le mixin défini - ainsi, vous n'avez à le saisir qu'une seule fois. Je place généralement les variables, fonctions et mixins en haut du fichier SASS, mais  cela n'a pas vraiment d'importance.
  
 ====== 5 ====== ====== 5 ======
Ligne 61: Ligne 88:
  
 And to use it in your SASS: name($param1, $param2);** And to use it in your SASS: name($param1, $param2);**
 +
 +Pour effectivement utiliser le mixin de gradient (pour créer un gradient en CSS), il vous suffit de taper : @include gradient($couleur1,$couleur2);
 +
 +Exemple :
 +@include gradient(#367864,#537a7c);
 +
 +donnera la CSS présentée à droite.
 +
 +Fonctions
 +
 +Les fonctions sont similaires aux mixins. Définissez votre fonction avec :
 +
 +@function nom($param1, $param2) { @return $resultat; }
 +
 +Et pour l'utiliser dans votre SASS : nom($param1, $param2);
  
 ====== 6 ====== ====== 6 ======
Ligne 82: Ligne 124:
   color: red;   color: red;
 }** }**
 +
 +Mathématiques
 +
 +SASS ajoute également des options pour utiliser les opérateurs mathématiques (tels que *, +, /, -). Vous devez toujours définir les unités de vos nombres, ou bien utiliser une fonction pour vous assurer que SASS sait quelle unité utiliser. Sinon, cela se traduira par un CSS valide (par exemple width: 150, au lieu de width: 150px).
 +
 +Héritage
 +
 +Cela vous permet d'utiliser dans votre fichier un CSS défini ailleurs. Si, par exemple, vous avez des messages d'avertissement et que chacun doit avoir une police de couleur différente, mais autrement reste le même, vous pouvez le définir comme ceci :
 +
 +.message {
 +  border: 1px solid #ccc;
 +  padding: 10px;
 +  color: #333;
 +}
 +
 +.error {
 +  @extend .message;
 +  color: red;
 +}
  
 ====== 7 ====== ====== 7 ======
Ligne 94: Ligne 155:
 _variables.scss - to contain your variables _variables.scss - to contain your variables
 app.scss - the main file, that only contains imports for each of the other files listed.** app.scss - the main file, that only contains imports for each of the other files listed.**
 +
 +Importation
 +
 +Enfin, SASS vous permet également de créer des fichiers séparés et de les importer dans un fichier principal. Quelque chose comme ceci :
 +
 +_mobile.scss - pour les tailles d'écran inférieures à 720px ;
 +_desktop.scss - pour des écrans plus grands ;
 +_mixins.scss - pour contenir tous vos mixins ;
 +_variables.scss - pour contenir vos variables ;
 +app.scss - le fichier principal, qui ne contient que les importations de chacun des autres fichiers répertoriés.
  
 ====== 8 ====== ====== 8 ======
Ligne 105: Ligne 176:
 http://sass-lang.com/guide - The official SASS guide. It covers some examples, and also houses the manuals (under Documentation). http://sass-lang.com/guide - The official SASS guide. It covers some examples, and also houses the manuals (under Documentation).
 @** @**
 +
 +Si vous recherchez un environnement SASS compatible avec diverses fonctionnalités utiles (par exemple une grille, un accordéon, un carrousel, etc.), j'ai utilisé l'environnement de la fondation Zurb à quelques reprises. Sinon, si vous préférez utiliser votre propre code CSS, le moment est peut-être venu de le convertir en SASS, pour apporter les futures modifications plus rapidement. Et en utilisant les articles de C&C des numéros 84 à 87, vous pouvez créer un dépôt git avec un système grunt configuré pour héberger votre nouvel environnement SASS.
 +
 +Si quelqu'un a des problèmes, des questions, des corrections ou des demandes, je vous encourage vivement à m'envoyer un courriel rapide à lswest34+fcm@gmail.com.
 +
 +Pour aller plus loin :
 +
 +http://sass-lang.com/guide - Le guide officiel de SASS. Il donne quelques exemples, et contient également les manuels (dans Documentation).
  
issue88/command_conquer.1421358741.txt.gz · Dernière modification : 2015/01/15 22:52 de fredphil91