CSS moderne avec SASS

Langue: Allemand

CSS moderne avec Sass - Tutoriel pratique

Tu as toujours été agacé par le fait qu'il n'y ait pas de variables et de boucles en CSS? C'est fini! Les préprocesseurs CSS comme Sass fournissent exactement ce genre de fonctionnalités. Ainsi, il est enfin possible de générer du code CSS de manière efficace. En plus de Sass, ce tutoriel jette bien sûr un œil au framework Compass très populaire, qui élève encore davantage l'utilisation de Sass à un autre niveau. Découvre en trois heures les possibilités offertes par Sass et Compass.

Deviens maître du Sass avec cette formation vidéo de trois heures avec le développeur web Daniel Koch.
Définissez les variables, créez vos propres mixins, expérimentez avec les couleurs et les nombres et, pour couronner le tout, utilisez Compass.
Apprends à générer efficacement du CSS et à appliquer tes nouvelles connaissances pour tes projets futurs.

Étape par étape vers le développement CSS professionnel. Si CSS, alors moderne et avec Sass - Daniel Koch te montre!

Zugriff auf alle Inhalte

In der Mitgliedschaft ab * € monatlich

oder

Inhalt in den Warenkorb

Sofort-Download nach Kauf: einmalig * €

Détails

Utilisable avec:
Contenu: 3 h Formation vidéo
Licence: privée et commerciale Droits d'utilisation

Catégories

Webdesign, CMS & Développement

Créé avec amour par:

Daniel Koch

CSS moderne avec Sass

Gratuit

CSS moderne avec Sass - 01 Une introduction

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.

CSS moderne avec Sass - 02 L'installation

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é.

CSS moderne avec Sass - Compilation réussie

CSS moderne avec Sass - Compilation Expertise

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.

CSS moderne avec Sass - regrouper les 04 fichiers

CSS moderne avec Sass - regrouper 04 fichiers

À 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.

Utilisation de variables Sass modernes en CSS - Déclaration et utilisation de 5 variables

Utiliser des variables Sass en CSS moderne - Déclarer et utiliser des variables - 05

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.

CSS moderne avec Sass - Le principe de l'imbrication

CSS moderne avec Sass - 06 Le principe de l'imbrication

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.

CSS moderne avec Sass - 07 Héritage habile avec Extend

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.

CSS moderne avec Sass - 08 modules avec les sélecteurs de placeholders.

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.

Définir des mixins en CSS moderne avec Sass.

CSS moderne avec Sass - Définition de 09 mixins

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.

CSS moderne avec Sass - 10 Sélecteur d'élément parent.

CSS moderne avec Sass - 10 Le sélecteur d'éléments parent

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.

CSS moderne avec Sass - 11 Automatisation avec des boucles For

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.

CSS moderne avec Sass - 12 boucles Each et While.

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.

CSS moderne avec Sass - 13 choix critiques avec if et else

CSS moderne avec Sass - 13 décisions critiques avec if et else

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.

CSS moderne avec Sass - 14 opérateurs mathématiques

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é.

CSS moderne avec Sass - 15 jeux de couleurs

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.

CSS moderne avec Sass - 16 Compass

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.

CSS moderne avec Sass - 17 Compass et CSS3

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.

CSS moderne avec Sass - 18 Compass en action de balle et un regard sur Susy

CSS moderne avec Sass - 18 Compass en action Bullet et un aperçu de Susy

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.

Détails sur le contenu

CSS de manière efficace - avec Sass : commencez par le tutoriel pratique
Sass a révolutionné le développement CSS, car enfin, il est possible d'écrire du code CSS de manière efficace. En trois heures intensives avec 18 leçons, vous découvrirez tout ce qu'il faut savoir sur le thème de Sass et du framework Sass Compass.

Installation de l'environnement de développement Sass

Avant de vous lancer dans le tutoriel CSS avec Sass, passons à l'installation. Mais ne vous inquiétez pas - c'est très simple. Ruby et quelques commandes dans la ligne de commande suffisent pour devenir fier propriétaire d'un environnement de développement Sass. Si vous avez hésité jusqu'à présent à installer Sass, vous serez guidé pas à pas à travers l'installation. Un premier test montrera ensuite quelle version de Sass est installée.

Premiers pas avec une structure de projet typique

Ensuite, passons aux premiers pas : C'est parti avec Sass ! Après un premier coup d'œil sur la syntaxe, suivez des particularités linguistiques fondamentales. Vous apprenez à connaître les variables, voyez une structure de projet typique et vous vous familiarisez rapidement avec Sass.

Développement : Boucles & Instructions If

Ainsi préparé, arrive le développement professionnel : Ce qui rend Sass si spécial, ce sont les choses qui rappellent presque de vrais langages de script comme JavaScript. Car même en Sass, il est possible de définir des boucles et d'utiliser des instructions If. Ces éléments sont alors la condition préalable à la formation de mixins, qui sont de puissantes fonctions qui vous simplifient considérablement le travail avec Sass, et finalement avec CSS.

Compass : Simplifie le travail avec le CSS

La cerise sur le gâteau de cette formation est Compass. Cela élève encore une fois le développement Sass à un tout autre niveau, car ce framework Sass propose de nombreux outils et fonctions qui rendent le travail avec CSS encore plus simple.

Ce que vous apprendrez dans le tutoriel CSS et Sass

Vous apprendrez pas à pas les fonctionnalités de Sass, de l'introduction aux outils professionnels en passant par le travail avec Compass. Ainsi, vous aurez en main ce qui est actuellement possible et pourrez mettre directement en pratique vos connaissances. Écrire du CSS n'a jamais été aussi efficace !