11.1 Sass (Syntactically Awesome Stylesheets)
Les préprocesseurs CSS sont des outils qui permettent d'étendre les capacités de CSS et de simplifier le processus d'écriture des styles. Ils ajoutent des fonctionnalités comme les variables, les règles imbriquées, les mixins et les fonctions, ce qui rend le code plus modulaire, réutilisable et facile à maintenir. Aujourd'hui, nous allons étudier les préprocesseurs CSS les plus populaires : Sass, LESS et Stylus.
Sass est l'un des préprocesseurs CSS les plus populaires, ajoutant de nombreuses fonctionnalités utiles pour la stylisation.
Installation de Sass
Tu peux installer Sass via npm :
npm install -g sass
Principales fonctionnalités de Sass
1. Variables
Les variables dans Sass permettent de stocker des valeurs qui peuvent être réutilisées :
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</body>
</html>
$primary-color: #333
body
color: $primary-color
2. Règles imbriquées
Les règles imbriquées permettent d'écrire du CSS dans un style plus hiérarchique :
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</nav>
</body>
</html>
nav
background: #eee
ul
margin: 0
padding: 0
list-style: none
li
color: tomato
3. Mixins
Les mixins permettent de créer des groupes de styles qui peuvent être inclus dans d'autres règles :
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Contenu</div>
</body>
</html>
@mixin border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
border-radius: $radius
.box
@include border-radius(10px)
border: 2px solid green
width: 256px
min-height: 200px
4. Héritage
L'héritage permet à un sélecteur d'hériter des styles d'un autre :
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Quelques infos</div>
<div class="box success">Succès</div>
<div class="box warning">Attention!</div>
</div>
</body>
</html>
%message
border: 1px solid #ccc
padding: 10px
color: #333
.box
min-height: 120px
&:not(:last-child)
margin-bottom: 5px
.info
@extend %message
.success
@extend %message
background-color: #cfc
.warning
@extend %message
background-color: #fc9
5. Fonctions
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@function px-to-rem($px, $base-font-size: 16px)
@return ($px / $base-font-size) * 1rem;
body
font-size: px-to-rem(18px);
Compilation de Sass
La compilation de Sass en CSS se fait avec la commande :
sass style.scss style.css
11.2 LESS
Installation de LESS
Tu peux installer LESS via npm :
npm install -g less
Principales fonctionnalités de LESS
1. Variables :
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</body>
</html>
@primary-color: #333;
body {
color: @primary-color;
}
2. Règles imbriquées :
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</nav>
</body>
</html>
nav {
background: #eee;
ul {
margin: 0;
padding: 0;
list-style: none;
li {
color: tomato;
}
}
}
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Contenu</div>
</body>
</html>
3. Mixins :
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.box {
.border-radius(10px);
border: 2px solid green;
width: 256px;
min-height: 200px;
}
4. Héritage :
LESS utilise le symbole "&" pour les références au parent.
<html>
<head>
<style>
button:hover {
background-color: #555;
}
</style>
</head>
<body>
<button>Bouton</button>
</body>
</html>
.button {
&:hover {
background-color: #555;
}
}
5. Fonctions :
LESS prend en charge les fonctions pour travailler avec les couleurs, les chiffres et les chaînes.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
@base: 16px;
.font-size(@size) {
font-size: (@size / @base) * 1rem;
}
body {
.font-size(18px);
}
Compilation de LESS
La compilation de LESS en CSS se fait avec la commande :
lessc style.less style.css
11.3 Stylus
Stylus est un préprocesseur CSS flexible et puissant qui offre une syntaxe concise et de nombreuses fonctionnalités utiles.
Installation de Stylus
Tu peux installer Stylus via npm :
npm install -g stylus
Principales fonctionnalités de Stylus
1. Variables :
<html>
<head>
<style>
body {
color: #333;
}
</style>
</head>
<body>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</body>
</html>
primary-color = #333
body
color primary-color
2. Règles imbriquées :
<html>
<head>
<style>
nav {
background: #eee;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
color: tomato;
}
</style>
</head>
<body>
<nav>
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
</nav>
</body>
</html>
nav
background #eee
ul
margin 0
padding 0
list-style none
li
color tomato
3. Mixins :
<html>
<head>
<style>
.box {
width: 256px;
min-height: 200px;
border-radius: 10px;
border: 2px solid green;
}
</style>
</head>
<body>
<div class="box">Contenu</div>
</body>
</html>
border-radius(radius)
-webkit-border-radius radius
-moz-border-radius radius
border-radius radius
.box
border-radius(10px)
border 2px solid green
width 256px
min-height 200px
4. Héritage :
Stylus utilise @extend pour l'héritage.
<html>
<head>
<style>
.box {
min-height: 120px;
}
.box:not(:last-child) {
margin-bottom: 5px;
}
.info, .success, .warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
background-color: #cfc;
}
.warning {
background-color: #fc9
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box info">Quelques infos</div>
<div class="box success">Succès</div>
<div class="box warning">Attention!</div>
</div>
</body>
</html>
.message
border 1px solid #ccc
padding 10px
color #333
.info
@extend .message
.success
@extend .message
background-color #cfc
.warning
@extend .message
background-color #fc9
5. Fonctions :
Stylus permet de créer des fonctions pour une réutilisation.
<html>
<head>
<style>
body {
font-size: 1.125rem;
}
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad cupiditate esse libero veritatis voluptatem?
Aliquam atque laboriosam porro recusandae totam.
</p>
</body>
</html>
px-to-rem(px, base-font-size = 16px)
px / base-font-size * 1rem
body
font-size px-to-rem(18px)
Compilation de Stylus
La compilation de Stylus en CSS se fait avec la commande :
stylus style.styl
GO TO FULL VERSION