#03 – Le SASS et le SCSS

Commencer le cours
SOMMAIRE

 

Tu ne peux pas encore visualiser ce cours car il n'a pas encore été débloqué.

Les cours sont débloqués au fur et a mesure de leur avancement en classe à MDS. Merci de jouer le jeu et de ne pas transmettre le mot de passe à tous le monde.

LE CSS

Pseudo classes et préprocesseur
Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour cibler et appliquer des styles à des éléments HTML spécifiques sur une page web. 

Sélecteur de types 
            p {} / main {} / div {}

Sélecteur de type ou sélecteur de balises / Un des sélecteur le plus basique.

Poids : 0-0-1-0

Ex : main p {} à un poids de 2

            .maClass{} / .monAutreClass{}

Poids : 0-1-0-0

Ex : .maClass.monTexte{} à un poids de 20

            #monID{} / #monAutreID{}

Poids : 1-0-0-0

Ex : #monID.maClasse{} à un poids de 110

            ul  li{} / p strong{} / div a{}

Poids : 0-0-0-1

            ul>li{} / p>strong{}

Poids : 0-0-0-1

            input[type="text"]

Poids : 0-0-0-1

Propriétés CSS

Les propriétés CSS définissent les styles visuels appliqués aux éléments HTML sur une page web. Chaque propriété CSS est associée à une valeur.

color 
            selecteur {color : #FFF; /*blanc*/}

Modifie la couleur du texte (police) sélectionné.

Couleur d’arrière-plan de l’élément selectionné

            selecteur {background-color : #FFF; /*blanc*/}

Taille de la police (en px , em , rem ou %)

            selecteur {font-size : 16px/em/rem/%;}

Famille de la police (Arial, Montserrat, Roboto etc …)

            selecteur {font-family: "Roboto", sans-serif; /*blanc*/}
        
            selecteur {font-weight : 100/400/700/bold;}

Epaisseur de la police (fin, normal, gras)

            selecteur {text-align : left/center/right/justify; /*blanc*/}

Alignement horizontal du texte dans son conteneur (left, center, right et parfois justifiy)

Le poids des sélecteurs

Le poids des sélecteurs CSS est un système de comparaison qui permet de déterminer quel sélecteur sera appliqué à un élément HTML lorsqu’il y a plusieurs sélecteurs qui correspondent à cet élément. Le sélecteur avec le poids le plus élevé est celui qui sera appliqué.

 

Le poids est composé de quatre chiffres, chacun représentant un type de sélecteur différent:

  • 1er chiffre: Type d’élément (balise)
  • 2ème chiffre: Classes
  • 3ème chiffre: IDs
  • 4ème chiffre: Pseudo-classes et pseudo-éléments

Chaque type de sélecteur a un poids par défaut:

  • Balise / Element: 1
  • Classe: 10
  • ID: 100
  • Pseudo-classes et pseudo-éléments: 10
Règles de priorité
  • Le sélecteur avec le poids le plus élevé est appliqué.
  • Si deux sélecteurs ont le même poids, le dernier sélecteur déclaré dans la feuille de style est appliqué.
  • Le mot-clé !important peut forcer un sélecteur à avoir la priorité, même si son poids est plus faible.
Type de sélecteurs Poids
ID
1-0-0-0
Class
0-1-0-0
Element
0-0-1-0
Pseudo-classe
0-0-0-1
Pseudo-éléments
0-0-0-1
Attributs
0-0-0-1
Combinateur d’enfant direct (>)
0-0-0-1
Combinateur d’adjacent direct (+)
0-0-0-1
Combinateur descendant ( espace )
0-0-0-1
Combinateur universel (*)
0-0-0-1
Style intégré
1-0-0-0

Opérations en CSS

Opérations arithmétiques d’addition, de soustraction, de multiplication et de division appliquées aux propriétés de style

            /* Exemple d'addition de marges */ 
.element { 
 margin: 10px; /* Marge de 10px */ 
 margin-top: calc(10px + 20px); /* +20px à la marge supérieure */ }
        
            /* Exemple de soustraction de largeur */ 
.box { 
 width: 10px; 
 width: calc(200px - 50px); /* Soustraction de 50px à la largeur */ }
        
            /* Exemple de multiplication de marges */ 
.element { 
 width: 100px;
 width: calc(100px * 1.5); /* Multiplier la largeur par 1,5 */ }

Pseudos-classes courantes CSS

Les pseudo-classes en CSS sont des sélecteurs spéciaux qui permettent de cibler des éléments HTML en fonction de leur état ou de leur position dans la structure du document.

 
Elles jouent un rôle essentiel dans la modification du style des éléments HTML en réponse à des interactions utilisateur ou à la structure de la page.

:hover

Changement de style au survol d’un élément. Reviens au style précédent à la sortie du curseur

:not

Le sélecteur :not permet de sélectionner tous les éléments qui ne correspondent pas au sélecteur passé en argument.

:focus

Le pseudo-sélecteur :focus permet de sélectionner un élément qui a le focus. 

:active

Le pseudo-sélecteur :active permet de sélectionner un élément qui est en cours d’activation par l’utilisateur.

:nth-child

Le sélecteur :nth-child() permet de sélectionner des éléments en fonction de leur position

Organisation des assets

Organiser les assets est essentiel pour un projet web réussi. Cela permet d’améliorer la performance, la maintenance, l’évolutivité, la maintenabilité, l’accessibilité et le référencement.

assets/

Ce dossier contient tous les fichiers statiques, tels que les fichiers CSS, JavaScript, images, polices, etc.

Dans ce dossier, vous stockez tous les fichiers CSS de votre projet. Vous pouvez organiser davantage les fichiers CSS en sous-dossiers si nécessaire (cette sous-arborescence est facultative et un simple exemple).

vendor/

Fichiers CSS de bibliothèques tierces (par exemple, Bootstrap, Font Awesome).

pages/

Fichiers CSS spécifiques à certaines pages.

components/

Fichiers CSS spécifiques à des composants réutilisables.

Ce dossier contient tous les fichiers JavaScript de votre projet. Vous pouvez organiser davantage les fichiers JSen sous-dossiers si nécessaire (cette sous-arborescence est facultative et un simple exemple).

Fichiers JS de bibliothèques tierces (par exemple, Bootstrap, Font Awesome).

Fichiers JS spécifiques à des modules/outils installés.

Il s’agit généralement du fichier JavaScript qui initialisera le composant racine.

LES PREPROCESSEURS

Définitions - Utilisation

Définitions

  • Préprocesseur

    Outil informatique qui permet aux développeurs web de simplifier et d'améliorer la gestion des styles pour leurs sites web. Il fonctionne en ajoutant des fonctionnalités supplémentaires au langage CSS de base, telles que des variables, des mixins, et des fonctions, pour faciliter la création

  • Syntaxe

    Les pré-processeurs utilisent une syntaxe étendue qui comprend des fonctionnalités supplémentaires telles que les variables, les mixins (fragments de code réutilisables), les boucles, les conditions, etc. Ces fonctionnalités ne sont pas disponibles dans le langage CSS de base.

  • Compilation

    Les fichiers écrits en pré-processeur doivent être compilés dans un fichier CSS valide avant d'être utilisés dans une page web. En revanche, les fichiers CSS peuvent être utilisés directement sans étape de compilation supplémentaire.

Différence SCSS et CSS

CSS
SCSS
  • Modifiable directement et aucun outil nécessaire

    Le CSS est modifiable uniquement avec un bloc note , contrairement au SCSS ou il faut des outils, dont un compilateur.
  • Lisible directement par le navigateur

    Pour le SCSS un passage à la compilation est obligatoire pour le convertir en CSS lisible par le navigateur
  • Possibilité de créer des variables

    Bien que le CSS dispose d'une forme de variable, c'est bien le SCSS qui permet de créer des variables comparables a d'autres langages de programmation.
  • Possibilité de créer du code réutilisable (mixin)

    Via le concept de mixins ou de fonctions , le SCSS permet d'écrire un code une seul fois qui sera réutilisé par plusieurs blocs ensuite.
  • Création automatisé des fichiers .css

    Il est possible de mettre en place un service qui convertit en CSS tous nos ajouts en SCSS , dès la sauvegarde du code.

SCSS préprocesseur de CSS ?

“Préprocesseur de CSS” signifie qu’il s’agit d’un langage de programmation qui étend les fonctionnalités du CSS traditionnel 

Utilisation de variables 
				
					$couleur-principale: #3498db; 



.bouton {
    background-color: $couleur-principale;
}
Nesting (indentation) 
				
					ul{
    li{
        a{
            text-decoration: none;
        }
    }
}
Fonctions (mixins) 
				
					@mixin bouton($couleur) {
    background-color: $couleur;
}

.bouton-principal {
  @include bouton(#3498db);
}

Avantage d'un pré-processeur

Réutilisabilité

Les pré-processeurs permettent de créer des mixins et des variables réutilisables, ce qui facilite la maintenance et la mise à jour du code.

Modularité

Les fonctionnalités permettent d'organiser le code de manière modulaire, ce qui facilite la gestion des styles pour de grands projets.

Productivité

Les fonctionnalités supplémentaires et la possibilité d'utiliser des boucles et des conditions permettent d'écrire du code CSS de manière plus concise

Contraintes d'un préprocesseur

Perte de temps

Parfois il est plus simple de travailler avec du CSS classique sans passer par un outil en plus qui nécessite du temps de mise en place.

Apprentissage

Les pré-processeurs ont une courbe d'apprentissage, car ils introduisent de nouvelles notions et syntaxes.

Etapes supplémentaires

Les fichiers pré-processeur doivent être compilés en CSS avant d'être utilisés, ce qui ajoute une étape supplémentaire au processus de développement.

Node.js

Première étape pour utiliser SCSS / SASS , il faut installer l’environnement d’execution (Node.js).

 

Cela va installer également NPM qui est un gestionnaire de paquets (de bibliothèque , de codes directement prêts à être intégrés à vos projets (dont SCSS).

 

Il est important de choisir la bonne plateforme (32bit / 64bit) pour éviter les éventuels bugs.

Redémarrage du poste nécessaire après installation

Installer SASS via NPM

SASS

Une fois Node et NPM fonctionnels, ont va les utiliser pour installer le préprocesseur. On va utiliser le Terminal de VS Code 
				
					npm install -g sass

Scripts Policies

Sous Windows il peut y avoir des restrictions sur l'execution de scripts dont a besoins SASS. Renseigner ces commandes dans le Terminal
Direction Arrows 
				
					Get Execution-Policy
# Unrestricted / Restricted
Set-ExecutionPolicy
Unrestricted -Scope CurrentUser -Force

Utilisation de SASS

Une fois tout installé (Node / NPM / SASS), il faut connaître deux ou trois commandes pour bien se servir de l’outil. Pour tester , créer un dossier nommée SASS et ouvrez le avec VSCode (dans VSCode , Menu > Fichier > Ouvrir le dossier). Une fois créé, ajouter un fichier nommé styles.scss

 

Compiler le code fourni pour le transformer automatiquement en CSS interprétable par le navigateur :

				
					sass styles.scss styles.css

Créer un fichier styles.css à partir de votre fichier .scss . Il faut taper la commande à chaque modification pour rafraichir le CSS.

				
					sass --watch styles.scss:styles.css

Place le compilateur en mode “écoute” de vos modifications. Dès que vous sauvegarderez votre fichier .scss il recompilera automatiquement.

Déclaration de variables - SASS / SCSS

Comme dans tout langage de programmation la variable est un élément contenant du code , qui peut être réutilisé a tout instant. En SASS/SCSS , il est possible de créer une variable pour stocker une couleur , un alignement ou n’importe quelle propriété.

				
					// Déclaration de variables
$primary-color: #3498db;
$font-size: 16px;
$margin: 10px;
				
			
				
					/*SCSS*/
.header {
  background-color: $primary-color;
  font-size: $font-size;
  margin: $margin;
}
				
			
				
					/*SASS*/

.header
  background-color: $primary-color;
  font-size: $font-size;
  margin: $margin;

Nesting - SASS / SCSS

Le “nesting” (appelé ‘imbrication’ en français) est une façon de rédiger pour cibler des éléments qui sont à l’intérieur d’autres. Par exemple, aller paramètrer l’effet de survol sur un “li” , lui même dans un “ul“

				
					/*SCSS*/
ul {
  list-style: none;
  li {
    padding: 5px;
    background-color: #f0f0f0;
    &:hover {
      background-color: #ccc;
    }
  }
}
				
			
				
					/*SASS*/

ul
  list-style: none

  li
    padding: 5px
    background-color: #f0f0f0

    &:hover
      background-color: #ccc

Mixins - SASS / SCSS

Les “mixins” sont ce qui se rapproche le plus des fonctions en programmation. Ils permettent de stocker plusieurs proriétés et selecteurs CSS pour les réutiliser à n’importe quel endroit du code. Par exemple : un bouton qui a toujours le meme style , on peut créer un mixin.

				
					/*SCSS*/
@mixin bouton-stylish {
  background-color: #3498db;
  color: white;
  padding: 10px 20px;
}

.button {
  @include bouton-stylish;
}
				
			
				
					/*SASS*/

@mixin bouton-stylish
  background-color: #3498db;
  color: white;
  padding: 10px 20px;

.button
/*Utilisation de la mixins*/
 @include bouton-stylish;

Fonctions - SASS / SCSS

Identique à celle utilisée dans d’autre langages de programmation , elle permettent d’effectuer des actions sur les propriétés CSS en renvoyant des valeurs calculées ,modifiées , etc . Contrairement aux mixins qui ne sont que de simples “modèles” de code , les fonctions permettent d’aller plus loin

				
					/*SCSS*/
@function calculate-width($width, $columns) {
  @return $width * $columns;
}
.col-2 {
  width: calculate-width(100px, 2); /* 200px */
}
				
			
				
					/*SASS*/

@function calculate-width($width, $columns)
  @return $width * $columns;

.col-2
  width: calculate-width(100px, 2);
#02 - L'accessibilité web
#04 - Partager son code

QUIZZ DE CONNAISSANCES

Test tes connaissances sur le sujet du cours
FAIRE LE QUIZZ
Qui sommes nous ?
Plan du site

☕ Crée par E-Kodama

Bienvenue sur la plateforme de cours numérique Ekolearn

Envie d’une escapade nocturne  ?

Tapes ta recherche puis appuie sur Entrée (↵)

Pas d'autocomplétion, mais pourquoi ?

L’autocomplétion dans un formulaire de recherche consiste à proposer des mots clés, des résultats, à chaque lettre écrite dans le champ. 

Oui cela est pratique, mais en terme de consommation de ressources c’est très gourmand ! Aussi, dans un soucis d’écoconception, ce formulaire de recherche ne régira pas à vos interactions en temps réel, mais il fonctionne quand même !

Bonne pratique n°4 du guide de l’éco-conception web

:hover
Points d'attention
  • S' applique et se retire en fonction de la position du curseur.
  • Le pseudo-sélecteur :hover ne fonctionne que sur les éléments visibles.
  • Ne pas en abuser pour eviter de rendre l'interface utilisateur trop flashy et difficile à utiliser. 
            p:hover {
  color: red;
}
Lorsque le curseur survole le paragraphe, sa couleur devient rouge.
:not
Points d'attention
  • Le sélecteur :not ne peut pas être utilisé pour sélectionner des pseudo-éléments.
  • Il est important de noter que le sélecteur :not est sensible à la casse. 
            div:not(.conteneur) p {
  text-align: center;
}
Ce sélecteur sélectionne tous les paragraphes qui se trouvent à l'intérieur d'une div, mais qui ne font pas partie de la classe .conteneur.
:focus
Points d'attention
  • S' applique et se retire en fonction de la position du curseur.
  • Le focus ne se limite pas aux éléments interactifs comme les champs de saisie. Il peut également être appliqué aux éléments non interactifs comme les paragraphes.
  • Ne pas en abuser pour eviter de rendre l'interface utilisateur trop flashy et difficile à utiliser. 
            #mon-input:focus {
  border-color: red;
}

p:focus {
  color: blue;
}
Lorsque le champ de saisie #mon-input a le focus, sa bordure devient rouge.
Lorsque le paragraphe p a le focus, sa couleur devient bleue.
:active
Points d'attention
  • S' applique et se retire en fonction de la position du curseur.
  • Le pseudo-sélecteur :active ne fonctionne que sur les éléments cliquables, comme les boutons et les liens.
  • Ne pas en abuser pour eviter de rendre l'interface utilisateur trop flashy et difficile à utiliser. 
            button:active {
  background-color: red;
}
Lorsque le bouton est cliqué, son arrière-plan devient rouge.
:nth-child
Points d'attention
  • Le premier élément est à la position 1.
  • Les enfants sont comptés dans l'ordre du DOM, y compris les éléments invisibles.
  • :nth-child() est sensible au contexte. Il ne sélectionne que les enfants directs de l'élément parent spécifié. 
            <div>
  <p>Paragraphe 1</p>
  <p>Paragraphe 2</p>
  <p>Paragraphe 3</p>
  <p>Paragraphe 4</p>
</div>

        
            p:nth-child(2) {
  color: red;
}
Le deuxième paragraphe s'affiche en rouge.

ATTENTION A TA SANTÉ

Tu ne semble pas avoir bougé depuis
MIN
0

N’hésites pas à lever les yeux , à regarder un peu “au loin” pour les soulager.

Également, n’hésites pas à t’étirer le cou et le dos en suivant quelques gestes simples.