Vous êtes ici : Accueil > Formations > Simplifier l’usage du CSS avec Scss & Sass

Formation Simplifier l’usage du CSS avec Scss & Sass

Optimisez et simplifiez votre CSS grâce aux langages préprocesseurs Sass et Scss !
Présentation
Plan détaillé
Ressources
Discussion
Avis (0)

Description de la formation

La formation Simplifier l’usage du CSS avec Sass et Scss vous permet de découvrir comment écrire du meilleur CSS grâce aux langages préprocesseurs, qui fournissent :

Des fonctionnalités supplémentaires :variables, Imbrication (nesting),l’héritage et l’extension des règles de style, les fonctions, mixins, les partials, les directives…

Des modules intégrés pour augmenter les capacités du CSS.

# À quoi servent les préprocesseurs ?

Les feuilles de style deviennent de plus en plus volumineuses, complexes et difficiles à maintenir. C'est là qu'un préprocesseur peut aider : Sass, Syntactically Awesome Style Sheets, est un langage d’extension CSS de qualité professionnelle pour écrire du CSS robuste, stable et maintenable.

+ Les avantages des langages préprocesseurs sont nombreux, on cite notamment :

La réutilisation des règles de style sans faire de répétition ;

La séparation des feuilles de style en modules pour améliorer la lisibilité et maintenabilité de la base de code ;

L’accélération de la productivité en écrivant du CSS plus riche et plus flexible ;

Le débogage des feuilles de style avec des directives universelles.

# Au programme de la formation Simplifier l’usage du CSS avec Sass etScss

+  Sass & Scss : les langages préprocesseurs

On découvre la syntaxe des langages préprocesseurs, les fonctionnalités et les avantages d’écrire du CSS maintenable et réutilisable comme avec un langage de programmation.

+  Installation, usage &outils de compilation

On découvre les différentes options d’installation et les outils pour compiler du Scss/Sass en CSS. On complète avec un premier exemple d’usage et de compilation.

Nous utiliserons le terminal, le paquet npm sass et Scout App, une application gratuite multiplateforme avec une interface graphique riche en fonctionnalités

+  Fonctions et modules intégrés de Sass

Pour aller plus loin, Sass fournit de nombreux modules intégrés et des fonctions utilitaires prêtes qui contiennent diverses fonctions utiles et quelques mixins qui le rendent facile à utiliser : sass-map, sass-color…

+ Projets et travaux pratiques

Il s’agit d’une formation au format didacticiel avec plusieurs projets et travaux pratiques. Un projet plus complet sera l’occasion d’appliquer toutes les notions et de consolider vos connaissances.

À l'issue de cette formation, vous saurez parfaitement gérer et maintenir votre base de code, ce qui est un gage de réussite pour vos projets futurs.

+ Projet complet avec le système 7-1

Un projet complet, développé en ReactJS, avec une architecture des feuilles de style en plusieurs modules CSS. Le tout est organisé en 7répertoires/sous-modules, lesquels sont compilés en un seul fichier.

Pour ce projet, nous utiliserons les ressources de la librairie Bootstrap 5,qui fournit une large collection de composants HTML et CSS réutilisables avec des classes prédéfinies et des utilitaires écrits en SASS.

Le système7-1 est un guide des feuilles de style pour réaliser vos futurs projets. L’objectif principal est de conserver une base de code ordonnée, flexible et évolutive.

# La formatrice experte Sandy LUDOSKY

Durant la formation Simplifier l’usage du CSS avec Sass et Scss, la formatrice experte et consultante en informatique, Sandy Ludosky, vous accompagnera et vous aidera à dépasser les limites du CSS et à créer des feuilles de style avec style.

Elle partagera avec vous des astuces et de bonnes pratiques à adopter dans vos projets professionnels de développement web.

Objectifs

Apprendre les fondamentaux : les variables, la notation imbriquée (nesting), l’héritage avec @extend, les sélecteurs d’espace réservé et les opérations arithmétiques. 

Apprendre les concepts et les techniques avancées :

○Partitionner les feuilles de style ;

○Gérer l’héritage avec les directives @use et @import ;

○Créer des @mixin et définir des @function ;

○Déboguer avec les directives universelles @debug @warn @error ;

○Et, même contrôler l’usage des règles CSS avec @if/else.

Prérequis

●Connaître les bases de développement et des langages HTML et CSS ; 

●Avoir une première expérience avec les librairies Bootstrap 5 et ReactJS serait un plus.

Public concerné

Le cours est de niveau intermédiaire à avancé et est destiné aux : 

●Développeurs professionnels ;

●Intégrateurs web.

Formateur : Sandy Ludosky
Date de mise en ligne : 16-03-2022

Evaluations


5
(10 votes)
5
10
4
0
3
0
2
0
1
0
Ceci peut aussi vous intéresser