Avec les conditions, il est possible de vérifier certaines informations dans notre fichier SCSS. Par exemple, si la couleur est égale à orange, alors on définie de nouveaux parametres :

CSS généré :

Grâce à cette condition, il est possible de changer la valeur de $shadow en paramétrant $color. Dans cet exemple, nous vérifions la valeur de $color, néanmoins, plusieurs autres comparaisons sont possible. Découvrez tous les control directive de SASS.

Les boucles

Les boucles permettent de répéter une instruction autant de fois que vous le souhaitez.

La boucle @for

CSS généré :

La boucle @while

CSS généré :

La boucle @each

CSS généré :

Cette liste peut être définie dans une variable (comparable aux tableaux en PHP). Chaque valeur doit être séparée par une virgule.
Exemple : $var: puma, sea-slug, egret, salamander;

L’article SASS – Leçon 5 : les conditions et les boucles est apparu en premier sur Ice Development.

Une mixin est un morceau de code paramétrable et réutilisable n’importe où dans votre fichier SASS. Comme pour une fonction, une mixin peut prendre des paramètres.

Mixin avec des paramètres

Grâce aux mixins, il vous sera possible de générer plusieurs dizaines de lignes CSS avec une seule ligne (paramétrable, ou non) en SCSS !

Exemple :

Fichier CSS compilé :

SASS n’intègre aucune mixin préconçue. Néanmoins, c’est l’un des points forts de Compass qui lui, propose une centaine de mixins prêtes à l’emploi : Compass Mixins.

Les fonctions

La différence entre une mixin et une fonction est le résultat retourné une fois compilé. Une mixin peut vous générer plusieurs lignes de code CSS tandis qu’une fonction vous retournera uniquement une valeur.

Grâce aux fonctions, il vous sera possible de calculer le pourcentage d’un bloc, de convertir une unité « px » en « em/rem » ou encore d’éclaircir une couleur.

Retrouvez le liste complète des fonctions SASS et Compass.

L’article SASS – Leçon 4 : les mixins et les fonctions est apparu en premier sur Ice Development.

Pour utiliser une variable, vous devez la déclarer avec l’aide du signe « $ » (dollars) suivi de son nom et de sa valeur : $background: rgba(black, .2);

Une fois déclarée, la variable peut être appelée n’importe où dans la suite du document, même si elle est définie dans un fichier importé à l’aide de @import.

Code CSS généré :

L’utilisation d’une variable n’a pas de limite, vous pouvez l’appeler autant de fois que vous le souhaitez. Il est également possible d’utiliser une variable dans une mixin, une fonction ou des boucles.

Cas d’utilisation d’une variable booléenne en SASS

Dans le billet SASS – Leçon 2, nous avons expliqué qu’il est possible d’organiser votre CSS de façon modulaire.
Grâce aux variables booléennes, vous allez pouvoir activer ou désactiver un partial ou une portion de code SASS.

Avec $use-slider à « false », le code à l’intérieur de la condition ne sera pas compilé.

L’article SASS – Leçon 3 : les variables est apparu en premier sur Ice Development.

Avec SASS, il est possible d’organiser votre projet en plusieurs fichiers, qui seront importés et compilés en un seul fichier CSS minifié.
Cela est rendu possible grâce aux partials.

Les partials en SASS

Le nom d’un partial est toujours précédé d’un underscore.
Ex : _reset.scss

Sans cet underscore, SASS générerait un fichier supplémentaire reset.css.

Code SCSS du fichier _reset.scss :

Code SCSS du fichier principal style.scss :

CSS compilé :

Grâce à la règle @import, vous pouvez opter pour une organisation modulaire, ce qui vous permettra d’avoir un code mieux structuré et plus facile à maintenir (ce que l’on retrouve dans la philosophie SMACSS).

L’article SASS – Leçon 2 : diviser pour mieux régner, la factorisation est apparu en premier sur Ice Development.

Imbrication de règle, exemple avec la couleur d’un lien et ses états hover et focus :

CSS compilé :

L’imbrication vous aidera à avoir un code propre, logique et bien organisé, qui devrait être plus facile à entretenir au cours du temps.

Bien-sûr, il est possible d’utiliser l’imbrication dans n’importe quel cas. Exemple avec les media queries :

CSS compilé :

L’article SASS – Leçon 1 : l’imbrication des règles est apparu en premier sur Ice Development.

CSS Hat est une extension payante (34.99$) qui va vous permettre de produire votre CSS beaucoup plus rapidement !

Voici un exemple d’utilisation sur la découpe HTML du menu principal en rouge ci-dessous :

1. Sélectionnez votre calque (attention, le calque doit impérativement comporter les styles ! Si vous utilisez un calque fusionné, le plugin ne fonctionnera pas)
2. Ouvrez la fenêtre dédiée de CSS Hat
3. Cliquez sur le bouton « Copy »

CSS Hat permet

• La génération dans les langages suivants : CSS classique, LESS, SCSS (Compass), SASS et Stylus
• La génération des prefix navigateurs
• La génération des dimensions du calque
• La génération d’une class CSS

Où le trouver ?

Pour acheter CSS Hat, rendez-vous sur le site officiel du plugin : csshat.com.

CSS Hat vous fera gagner énormément de temps pendant votre découpe, notamment pour les boutons complexes ou encore pour les fonds en dégradé, comme dans l’exemple ci-dessus.

L’article Générez plus rapidement vos feuilles de style grâce à CSS Hat est apparu en premier sur Ice Development.