Advertisement
  1. Web Design
  2. Foundation for Apps
Webdesign

Méthode Pour Travailler Avec Sass et Foundation

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Foundation for Beginners.
Setting up Foundation With Sass and Compass

French (Français) translation by David Leuliette (you can also view the original English article)

NB : Cet article est mis à jour pour respecter l'architecture de Foundation 5.

Dans ce tutoriel nous allons découvrir ce qu'il est possible de faire avec la flexibilité des styles Sass inclus dans le framework Foundation. Un grand nombre de ceux-ci offrent plus de liberté que d'utiliser simplement la version CSS. De plus il existe des raccourcis qui peuvent être utilisés pour personnaliser certains éléments de style, comme la barre du haut, rapidement et facilement.

Pour installer un nouveau projet vous pouvez suivre les instructions du tutoriel installer Foundation avec Sass et Compass ou lire la documentation officielle de Zurb.

Vous pouvez utiliser un terminal et les lignes de commande pour mettre en place un nouveau projet ou simplement télécharger les fichiers depuis GitHub et les importer dans votre projet.

Vous avez l'embarras du choix...

La grille

Commençons avec la fonctionnalité de base de Foundation : la grille. C'est l'un des meilleurs exemples de composant pour illustrer la flexibilité de scss/sass.

Grille CSS de Foundation avec 12 colonnes
Exemple avec une grille de 12 colonnes

Lorsque vous utilisez les mixins disponibles pour la grille (les mixins, en passant, sont comme des raccourcis de code pré-écrit), vous pouvez créer vos propres classes, ou même votre propre grille en utilisant quelques variables simples. Regardons le premier exemple tiré de Foundation :

Vous pouvez voir que nous avons un mixin (Facilement identifiable avec son préfixe @) qui a comme argument une variable. Nous commençons avec le mixin @include grid-row, en précisant ses options entre parenthèses.

Lorsque vous créez un mixin, vous pouvez spécifier des morceaux de code pré-écrit susceptible de changer à chaque fois que vous utilisez ce mixin. Un exemple simple serait de créer un mixin qui ajoute une police, sa taille, son poids, sa couleur, etc. Mais peut-être que vous voulez être en mesure de changer la couleur de police à chaque fois que vous utilisez le mixin. Cet argument sera passé en variable entre parenthèses.

Dans ce cas nous utilisons une variable dans notre code. Ces dernières sont utilisées pour stocker des valeurs en Sass et commencent avec le signe $. Par exemple :

Dans notre code précédent nous avons crée un mixin, défini une couleur en utilisant la variable $blue, et utilisé cette dernière entre parenthèse pour appliquer une couleur #0099cc avec notre mixin.

Si nous revenons à notre premier exemple, vous remarquerez plusieurs variables $behaviour. Cela peut sembler étrange au premier abord. "Attendez, vous écrasez inutilement cette variable à chaque fois ?". C'est un peu plus compliqué que cela mais -comme dans un tableau, cela permet de faire correspondre la bonne option au bon comportement désiré, dans leur ordre de déclaration.

Vous pouvez aussi rencontrer plusieurs variables dans vos @include :

Pour vraiment mettre cela en application, nous allons créer une grille sémantique en utilisant du HTML basique. Ce n'est pas conseillé mais aucune classe ne sera utilisé dans cet exemple.

Exemple de grille sémantique avec un header
Mise en page de grille sémantique

Vous remarquerez que dans ce cas le HTML est minimal, et sass calcule parfaitement la nidification. Nous avons aussi déclaré quelques valeurs globales de taille maximale, l'espacement entre les gouttières ainsi que le nombre de colonnes. D'un point de vue structure HTML cela nous fait gagner pas mal de temps, mais cet exemple peut sembler un peu confus. Intéressons-nous à la construction des boutons avec Sass qui peut être plus facile à comprendre.

Boutons

Une des choses les plus intéressante avec Sass est la rapidité avec laquelle vous pouvez styler vos pages et le temps que vous gagnez en ne dupliquant pas inutilement votre code.

Image du style des boutons avec le framework foundation
Styles et tailles des boutons de Foundation

Vous pouvez utiliser un raccourci pour créer rapidement un bouton personnalisé comme ceci :

Ajoutez à cela quelques options, et avec seulement une seule ligne de code vous avez répliqué une dizaine de déclarations CSS, un très bon gain de temps !

Vous remarquerez que pour la création de boutons il y a une tonne d'options qui n'existent pas dans la version CSS et cela est vrai pour tous les éléments Sass. Cela vous ajoute un niveau d'abstraction et de liberté supplémentaire comparé au CSS. Reprenons la déclaration précédente, mais sans utiliser de raccourcis. Vous pourrez plus facilement vous faire une idée de comment cela fonctionne.

Image d'exemple avec sass pour styler des boutons
Vous êtes obligés de cliquer dessus

Cet exemple est assez basique, mais ce cas d'utilisation est assez fréquent. Quand le code est compilé, le CSS final ressemble à ça (Et il y a énormément de lignes qui prennent beaucoup plus de temps que d'utiliser la puissance de Sass) :

Un certain nombre d'entre vous imagine Sass comme un langage complètement obscur, mais il est très facile de s'y habituer après avoir codé quelques lignes. La structure est beaucoup plus épurée et compréhensible, et il est toujours possible d'utiliser la syntaxe CSS dans vos feuilles de styles SCSS -si cela est vraiment nécessaire.

Table de conversion

Finalement, une des fonctionnalités méconnues de Sass est de pouvoir ajouter des fonctions à vos feuilles de styles. Ce ne sont pas des fonctions dynamiques (Elles sont exécutées quand votre Sass est compilé), cependant elles offrent encore plus de possibilités pour gagner du temps.

Par exemple, dans Foundation il y a une fonction pour convertir proprement des pixels en rem. C'est fantastique pour la création de sites responsives, réglez simplement la taille de base avec :

Ensuite si vous voulez utiliser une mesure en rem, que vous devriez normalement convertir des pixels en em, utilisez simplement :

"46" est la taille exprimée en pixels et rem-calc est la fonction. Vous pouvez l'utiliser n'importe où dans votre Sass dès que vous avez besoin d'une valeur en pixels.

Outils indispensables

Dans un article précédent nous avons mentionné les compilateurs Sass et le bénéfice qu'ils apportent comparé à une compilation manuelle. Cette fois ci je vais vous présenter les outils que j'utilise quotidiennement dans presque tous mes projets.

Premièrement si vous utilisez Foundation vous aller travailler avec Sass, CSS, HTML et JavaSCript, mais une partie importante de n'importe quel site internet sont les images, et spécifiquement les fichiers .png et .jpg. Il est vital d'avoir des images optimisées, pour cela je vous conseille d'utiliser imageOptim (OS X) ou File Optimizer (Windows).

Ces outils compressent les images sans perte de qualité. Ces logiciels sont extrêmement efficaces et la compression peut même attendre dans certains cas 70%. Imaginez ceci, un .png d'une taille de 100kb peut être réduit à 30kb après optimisation. Cela est bien plus efficace que de créer un sprite.

image-compress
Améliorez la vitesse de chargement en optimisant vos images

Si vous cherchez une liste plus complète voici un lien pour les meilleurs outils du développeur front-end.

Et après ?

Nous avons exploré comment travailler de façon basique avec Sass, comment Foundation doit être configuré, ce que vous pouvez faire et comment accélérer votre méthode de travail. Pour progresser je vous invite à utiliser quelque chose de très excitant : Foundation avec Ruby on Rails. Cela vous permettra d'utiliser des fonctionnalités dynamiques qui sont très cool pour travailler avec votre HTML, CSS et JavaScript.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.