Olvídese del CSS y adopte el SASS
SI ya ha integrado páginas web seguro que conoce el CSS (al menos eso espero), ese maravilloso lenguaje que le permite hacer sus páginas agradables de leer.
En efecto, es este lenguaje el que los navegadores interpretan para dar estilo al contenido de los sitios web.
Pero entonces, ¿por qué le pido que deje el CSS?
Antes que nada, dejemos clara una cosa: lo que recomiendo encarecidamente no es dejar de usar CSS, sino dejar de CODIFICAR en CSS.
Efectivamente, esta forma de estilizar en los archivos .css se ha vuelto tan arcaica a mis ojos… Y le aseguro que estará de acuerdo conmigo una vez que haya probado lo que le voy a proponer: el SASS
1/ ¿Qué es el SASS?
SASS (acrónimo de Syntactically Awesome Style Sheets) es un lenguaje de scripting que le permite escribir su código de forma diferente y luego compilarlo en CSS. Porque como lo precisé en la introducción: no se trata de otro lenguaje de programación interpretado por los navegadores web. ! ¡No!, sigue siendo CSS al final.
SASS es un lenguaje que simplemente nos permite programar de forma diferente a través de su script, el nombre de este script es SassScript.
Este lenguaje SASS tiene 2 sintaxis:
- SASS, la sintaxis original también llamada “sintaxis indentada”,
- y SCSS, una sintaxis que apareció un poco más tarde y que es la más utilizada.
La sintaxis original se caracteriza por su indentation, su ausencia de punto y coma “;” y sus saltos de línea (para separar los bloques de reglas). De ahí que también la llamemos sintaxis indentada. Puede recordar a lenguajes de programación como Python para los que lo conocen.
La sintaxis más popular es SCSS, que sigue siendo similar a CSS ( conservamos las llaves y los puntos y comas).
He aquí un ejemplo de estas dos sintaxis:
a, .link {
color: $primary-color;
text-decoration: none;
}
form {
.btn-primary {
background-color: $primary-color;
color: white;
border-radius: $default_radius;
border: 1px solid;
}
}a, .link {
color: $primary-color;
text-decoration: none;
}
form {
.btn-primary {
background-color: $primary-color;
color: white;
border-radius: $default_radius;
border: 1px solid;
}
}Al preferir también la sintaxis SCSS continuaré el curso con este ^^
2/ Mais quel intérêt de se mettre à ce language SASS ?
C’est peut-être la question que vous vous posez actuellement. Et bien car ce language vous offre des fonctionnalités inédites dans le domaine de la stylisation web !
Grâce au SASS vous pourrez : définir des variables, imbriquer votre code, créer des loops (boucles foreach, for et while), des conditions (if, else), des mixins, des fonctions et des héritages !
Pour les fans de PHP ou autres languages de programmation avec ce genre de fonctionnalités vous allez prendre votre pied je vous le garanti !
a/ Imbriquez votre code
Ce premier point peut à lui seul vous convertir au SASS : pouvoir imbriquer votre code ! En terme de lisibilité je trouve cela tellement plus agréable que de devoir répéter sans arrêts des lignes de sélecteurs… Regardez plutôt ! :
.post .post-container .post-content {
box-shadow: 0 0 20px lightgrey;
}
.post .post-container .post-content .paragraph {
margin: 20px auto;
}
.post .post-container .post-content .paragraph h2 {
font-size: 24px;
}
.post .post-container .post-content .paragraph p {
font-size: 16px;
}
.post .post-container .post-content .paragraph p a {
text-decoration: none
}.post .post-container .post-content {
box-shadow: 0 0 20px lightgrey;
.paragraph {
margin: 20px auto;
h2 {
font-size: 24px;
}
p {
font-size: 16px;
a {
text-decoration: none
}
}
}
}Ça respire quand même un peu plus non ?! 🙂
b/ Les variables
Alors je vois d’ici les petits malins qui vous me dire qu’il est déjà possible de définir des variables en CSS. Et oui c’est en effet le cas, pour ceux qui ne le sauraient pas déjà voici comment faire en CSS (à gauche). Et voici également comment se définissent des variables en SCSS (à droite)
:root {
--primaryColor: lightblue;
--borderRadius: 5px;
}
button {
border-radius: var(--borderRadius);
background-color: var(--primaryColor);
}$primary-color: lightblue;
$border-radius: 5px;
button {
border-radius: $primary-color;
background-color: $border-radius;
}Petite précision, pour être correct dans le jargon CSS, il s’agit ici de Custom Properties et non de variable.
À première vue il n’y a pas de réelle différence entre les 2, mais en réalité il y a plus de subtilités que vous ne le pensez. Si vous souhaitez en savoir plus je vous renvoie à mon article sur la différence entre les variables CSS et les variables SCSS.
Et en effet, si votre seul besoin est d’utiliser des variables pas de réelle nécessité à faire du SCSS. MAIS… sachez que ces variables vous seront très utiles pour les autres fonctionnalités ! 🙂
c/ Les boucles
Là on commence à tater à des choses sympas ! Les boucles ! En SASS vous pouvez créer des boucles (comment en PHP, Javascript, Python et autres…) et cela vous fera économiser beaucoup de temps !
Imaginons par exemple que vous souhaitez avoir des classes générique pour attribuer des positions à vos éléments, voici ce que cela donnerait en css puis en scss :
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.fixed {
position: fixed;
}
.static {
position: static;
}
.sticky {
position: sticky;
}$positions: ('absolute', 'relative', 'fixed', 'static', 'sticky');
@each $pos in $positions {
.#{$pos} {
position: $pos;
}
}C’est quand même beaucoup plus maintenable et agréable à coder non ? 🙂
d/ Les conditions
Vous pouvez également utiliser des conditions. Imaginons que j’ai un tableau avec des couleurs mais que je ne veux me servir que de 2 d’entre elles pour une règle particulière :
$primary-color: #FF5733;
$secondary-color: #990200;
$colors : (
primary : $primary-color,
secondary : $secondary-color,
green : 'green',
red : 'red',
yellow : 'yellow'
);
@each $key, $val in $colors {
@if $key = 'primary' or $key = 'secondary' {
.btn-#{$key} {
background-color: #{$val};
}
}
}e/ Les mixins
Pour schématiser simplement les mixins pourraient être vu comme des variables contenant un bloc de règle de style. Cette mixin, une fois définie peut-être importée dans d’autres règles. Il est également possible de passer des arguments dans vos mixins afin de jouer avec vos variables :
@mixin title($fontSize) {
font-weight: 600;
font-size: $fontSize;
text-decoration: underline;
color: $primary-color;
}
.big-title {
@include title(36px);
}
.medium-title {
@include title(24px);
}f/ Les functions
SASS vous propose déjà son lot de fonctions très utiles classées dans des Built-In Modules. Mais vous pouvez également créer vos propres fonctions ! Voici un exemple très simple pour additionner des valeurs :
@function sum($nbrs...) {
$sum: 0;
@each $nbr in $nbrs {
$sum: $sum + $nbr;
}
@return $sum;
}
.micro {
width: sum(50px, 30px, 100px);
}g/ Les héritages
Comme je vous l’ai précisé le SASS vous permettra d’écrire moins de code. Avec les héritages vous pouvez transmettre directement le style d’un élément à ses enfants :
.btn {
border-radius: 50px;
padding: 8px 15px;
color: black;
background-color: none;
&-primary {
@extend .btn;
background-color: $primary-color;
color: white;
}
}Ici la class .btn-primary hérite des règles de la classe .btn
Info utile le & avant le nom de la classe signifie “ajoute au nom de la classe courante”. Donc dans notre exemple la classe courante dans notre indentation est btn, auquel on ajoute -primary, ce qui nous donne btn-primary.
Voilà ! Il y a évidemment beaucoup d’autres choses à apprendre et à utiliser avec le SASS mais je tenais à vous en faire une présentation simplifiée afin d’attiser votre curiosité ! 🙂
Si vous souhaitez approfondir tout cela je vous conseille de vous rendre sur la doc officielle de SASS.
There are no reviews yet. Be the first one to write one.