CATALOGUE Code & Data Formation XHTML/CSS Maîtrisez le préprocesseur CSS : SASS Comprendre et Utiliser SASS et SCSS avec Compass

Comprendre et Utiliser SASS et SCSS avec Compass

La compilation en direct
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtrisez le préprocesseur CSS : SASS
Revoir le teaser Je m'abonne
5,0
Transcription
34,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
5,0
34,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Introduction à SASS et SCSS

Objectifs

Les objectifs de cette vidéo sont de :

  • Comprendre les extensions et syntaxes de SASS et SCSS
  • Apprendre à intégrer et compiler des fichiers SCSS en CSS
  • Maitriser l'utilisation de Compass pour la compilation automatique
  • Améliorer la productivité avec des outils de développement modernes

Résumé

Découvrez comment utiliser SASS et SCSS pour optimiser le développement de vos feuilles de styles CSS en les compilant automatiquement avec Compass.

Description

Cette leçon explique l'utilisation de SASS et SCSS pour la gestion de vos styles CSS. Nous commençons par explorer les fichiers générés par l'invite de commande Ruby, mettant en lumière les différentes extensions de fichiers SASS (.SASS et .SCSS) et leurs syntaxes respectives. Ensuite, nous démontrons comment intégrer un fichier RESET issu de la bibliothèque COMPASSE, avant de suivre les étapes de compilation automatique via l'invite de commande avec la commande compass watch.

La leçon se poursuit par la création d'un fichier index.html et l'utilisation de la puissance d'Emmet pour générer un squelette HTML. Nous montrons comment lier le stylesheet screen.css et organisons la compilation pour appliquer des modifications en live. En modifiant le fond de page en CSS et en observant la recompilation en temps réel, nous mettons en évidence l'efficacité de l'utilisation de Compass pour gérer les changements dynamiques dans les styles SCSS.

Voir plus

Questions - réponses

Quelle est la différence principale entre SASS et SCSS ?
SASS utilise une syntaxe plus concise sans accolades ni point-virgules, tandis que SCSS utilise une syntaxe similaire à CSS avec des accolades et des points-virgules.
Quelle commande est utilisée pour surveiller les changements dans les fichiers SCSS et les compiler automatiquement ?
La commande utilisée est 'compass watch'.
Que fait le fichier RESET importé dans screen.scss ?
Le fichier RESET remet à zéro toutes les valeurs CSS par défaut sur les navigateurs, permettant de partir d'une base neutre pour le développement de styles.
1 commentaire
5,0
1 vote
5
4
3
2
1
hugo.barnas
Il y a 4 years
Commentaire
Claire et complet.