Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Généralités

Mis à jour le

Ce cours est utilisable, mais il n'est pas entièrement fini. Merci de votre compréhension.

Vous trouverez un TP sur SCSS en bas du cours.

Présentation

Mis à jour le

Apporte des améliorations au langage CSS

Préprocesseur

Doit passer par un "compilateur" pour transformer le scss en css

Permet d'écrire du CSS amélioré

Possibilité de variables, de fonctions, d'imbrications, etc...

Le but est bien de générer du CSS au final

Un avantage à la compilation : détection des erreurs


voir compass ?

Logiciel de compilation (koala, scout,...)


Fonctionnement

un dossier…

~~ Fin de l'extrait ~~

Les compilateurs SCSS et leurs réglages

Mis à jour le

Le SCSS n'est pas utilisable en soit par un navigateur web. Il faut obligatoirement passer par une étape de compilation, qui va transformer votre code source SCSS en code CSS.

Cette étape nécessite l'utilisation d'un logiciel dédié, dit "compilateur". Ce genre de logiciel existe sous de nombreuses formes, que nous allons…

~~ Fin de l'extrait ~~

L'imbrication

Mis à jour le

Contrairement au CSS, vous pouvez imbriquer des règles entre accolades indéfiniment en SCSS.

SCSS

div {
ul{
li{
   color:red;
}
}
}
CSS
div ul li {
 color:red
}

On peux utiliser les même sélecteurs que d'habitude (classe, id, balises, etc...)


L'opérateur &

L'opérateur "&" permet de changer le comportement par défaut du compilateur pour l'imbrication. Il va permettre…

~~ Fin de l'extrait ~~

Les variables

Mis à jour le

Les variables permettent d'avoir un code beaucoup plus maintenanble car lorsque vous voulez faire des modifs, vous n'avez pas à aller modifier tous les endroits de votre CSS "statique", mais vous bn'avez qu'a changer la valeur de votre variable.

Ex : 

$ma-couleur-favorite: red;
a{
color:$ma-couleur-favorite;
}
button{
background-color:$ma-couleur-favorite;
}
.important{
border: solid 1px $ma-couleur-favorite;
}


~~ Fin de l'extrait ~~

Les opérations

Mis à jour le

Les mixins

Mis à jour le

Les fichiers sourcemaps

Mis à jour le

Fonctionnalités avancées

Mis à jour le

extends

fonctions intégrées

placeholder

interpolation de variable

boucles

conditions


Exercices

Mis à jour le