CSS moderne avec Sass - Tutoriel pratique

Grâce aux préprocesseurs CSS, il est possible d'écrire du CSS de manière beaucoup plus efficace. Ce que sont ces préprocesseurs, lesquels existent et pourquoi le choix s'est porté sur Sass dans cette série, sont présentés dans cette vidéo.

Avant de pouvoir utiliser Sass, vous devez l'installer. Et la condition préalable à cela est Ruby. Les deux - c'est-à-dire l'installation de Ruby et de Sass - sont présentés dans cette vidéo. Ensuite, vous pourrez immédiatement tester si l'installation de Sass a réellement fonctionné.

Les Sass doivent être convertis en fichiers CSS pour être effectivement utilisables. Grâce à la commande Watch, vous pouvez facilement détecter les modifications apportées à des fichiers individuels ou à l'intérieur de répertoires entiers.

À propos de @import, il est possible d'importer et de fusionner des fichiers SCSS. Ce que tout cela a à voir avec un tiret bas précédant le nom de fichier est un aspect de cette vidéo.

En Sass, il est possible de déclarer des variables. Ce concept n'est pas disponible dans le CSS traditionnel, mais est un outil ingénieux pour le développement efficace des feuilles de style en Sass.

Grâce au nesting, la syntaxe Sass peut être maintenue beaucoup plus concise que ce qui est habituel en CSS. L'imbrication vous aide en outre à écrire le code de façon beaucoup plus claire.

L'utilisation de @extend vous permet de transmettre un ensemble de propriétés CSS d'un sélecteur à un autre. Cela aide également à garder les fichiers Sass légers.

Le sélecteur de placeholder permet de définir des modules. Cette modularisation permet de diviser la syntaxe Sass en blocs logiques pouvant être inclus à différents endroits.

Les mixins sont des fonctions qui permettent de simplifier considérablement les processus de travail, par exemple. Cette vidéo montre comment définir vos propres mixins et finalement les appliquer.

Avec le sélecteur dont il est question dans cette vidéo, vous pouvez accéder à l'élément parent d'un élément. Ce sélecteur n'existe pas dans CSS et offre donc une énorme valeur ajoutée.

Sass permet l'utilisation de boucles For. Cela fonctionne très simplement en Sass et peut par exemple être utilisé pour la définition d'un propre système de grille.

En plus de la boucle For, on peut également utiliser les boucles Each et While en Sass. Cette vidéo montre comment les utiliser pour l'automatisation.

En langages tels que PHP et JavaScript, il est possible de réagir à différents événements en utilisant les instructions if et else. Ce genre de chose est en fait également disponible en Sass. La manière dont cela peut être utilisé est présentée dans cette vidéo.

Vous pouvez calculer en Sass. C'est pratique par exemple pour la définition des tailles de police. Grâce aux opérateurs appropriés, vous pouvez également construire votre propre système de grille entièrement personnalisé.

Bien sûr, on peut définir des couleurs en Sass. Mais Sass va également beaucoup plus loin dans ce domaine que le CSS traditionnel. Grâce aux fonctions appropriées, il est par exemple très simple de manipuler des couleurs.

Le framework Compass étend une fois de plus les capacités de Sass de manière significative. Cette première vidéo montre comment installer et utiliser Compass.

Le site web du projet Compass est l'outil central d'information lorsqu'il s'agit de travailler avec ce framework. Je vais vous montrer comment travailler avec les fonctionnalités CSS3 de Compass en utilisant la documentation.

Un exemple montre à quel point il est facile de mettre en œuvre des choses avec Compass. À la fin de cette série, un regard est également porté sur un framework Sass alternatif. Susy offre un système de grille léger.