20,00

Tuto Apprendre à utiliser SASS et SCSS avec CSS

20,00

  • Une formation vidéo de 1h13m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com

Dans cette formation en ligne, tu vas apprendre à utiliser le préprocesseur SASS avec la syntaxe SCSS.

Les préprocesseurs CSS permettent principalement de gagner du temps sur ses fichiers CSS.
Des tas de fonctionnalités ont été créées dans le but d'augmenter le rendement de notre travail, sa logique, et d'optimiser le nombres de lignes de code.

Apprendre à utiliser SASS et SCSS

Ces fonctionnalités, nous allons les apprendre une par une :

  • Les opérateurs, (pour faire des calculs en CSS).
  • Les Variables, pour pouvoir entreposer des couleurs et des valeurs dans des variables réutilisables.
  • Le nesting, une façon plus intuitive décrire du CSS.
  • Les Extends, pour étendre les propriétés CSS d'un sélecteur.
  • Les Partials et Imports, pour écrire du CSS dans un fichier séparé puis l'importer.
  • Les Mixins, Pour écrire du CSS réutilisable.
  • Les fonctions, pour utiliser un système de fonction comme dans un langage classique.

Nous verrons toutes ces notions grâce à un petit projet concret, afin de pouvoir les mettre directement en pratique !
 

Quelle est la différence entre SASS et SCSS ?

C'est très simple, SASS est le nom de ce préprocesseur, et à la base sa syntaxe était unique, c'était la syntaxe de SASS.
Mais cette syntaxe s'est vite révélée assez contraignante due à sa lisibilité qui était, disons-le, mauvaise.
C'est là que vient la syntaxe SCSS, beaucoup plus logique et intuitive. C'est cette syntaxe que la majorité des développeurs utilisent aujourd'hui. Donc on va apprendre à utiliser le préprocesseur SASS avec sa syntaxe : SCSS !

Je reste disponible dans le salon d'entraide pour répondre aux éventuelles questions sur le cours. 

Table des matières de cette formation CSS (durée : 1h13m)

  • Introduction
    • Introduction gratuit 00:00:00
  • Les Fonctionnalités de SASS
    • Les Variables SASS gratuit 00:05:11
    • Le Nesting 00:04:22
    • Clearfix et Nesting partie 2 00:05:16
    • Les Mixins 00:05:34
    • Les fonctions avec SASS 00:01:46
    • Étendre des propriétés avec Extends 00:04:07
  • Le Projet
    • Mise en Place gratuit 00:03:56
    • Mise en place Partie 2 00:07:09
    • Partie HTML du Header 00:05:59
    • Palette de couleurs et début de fichier 00:04:33
    • Créer la première Box 00:08:06
    • Créer la seconde Box 00:05:32
    • Section Contenu, HTML 00:02:49
    • Footer et Media Queries 00:04:32
    • Section Contenu, SASS 00:04:59



Formateur : Enzo Ustariz

Enzo Ustariz a publié 41 tutoriels et obtenu une note moyenne de 4,9/5 sur 1 182 tutoriels vendus. Voir les autres formations de Enzo Ustariz

4,8
note moyenne

4
avis laissés
5 étoiles
3
4 étoiles
1
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de membre-5161-5748 laissé le 09/09/2020
    Un excellent tuto .. vraiment ... c'est un peu rapide mais Enzo donne des explications sur les points délicats au fur et à mesure de la progression ... même si certains points n'ont pas été expliqué ... C'est compréhensible, on ne peut pas tout expliquer dans une vidéo d'une heure ....

  • 5
    avis de tedm laissé le 11/11/2019
    Très bonne prise en main de Sass. Explications claires. Merci Enzo :)

  • 4
    avis de ced-dev laissé le 12/01/2020
    Formation non démonstration oui il manque l'image de la cascade et il manque la video qui nous dit on se donne rendez-vous pour la video de fin qui n'existe pas, je reste sur ma fin, seulement quelques concepts basique évoqué ou est le reste ? Pour éviter tout malentendu vu que sur tuto.com des gens qui se croient tellement parfait dans leurs cours se vexe des que l'on ne mets pas 5/5 ceci est mon avis perso je juge sur le contenu pas sur la qualité du cours
    "Ce cours est relativement vieux, je suis entrain d'en tourner un complet sur CSS, qui contiendra une partie complète sur les préprocesseurs. À bientôt, Enzo"

  • Avec quelle version de logiciel ce tuto est-il compatible ?
    CSS 3
  • Quel est le niveau requis pour suivre ce tuto ?
    débutant
accédez à plus de 1222 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données