Les variables scss

Bonjour à tous,

J'ai vu que l'on peut ecrire en scss les variables de plusieurs façon:

$bleu-sombre: rgb(14, 26, 34);
// ou bien
--bcnt_link: rgba(255, 255, 255, 0.1);

Pour l'appel, cela ce fait par ex:

div{
    background: $fond-bleu-sombre;
}
// ou bien 
div{
    background: var(--bcnt_link);
}

J'ai pas bien saisi la différence!

J'ai pas bien saisi la différence non plus entre @mixin et %css_nom ? mise à part leur appel avec @include et @extend ? le résultat a l'air d’être même !

Merci d'avance
Modifié par gesualda (03 Mar 2022 - 15:20)

Salut,

Cette forme de var et ce type d'appel :

--bcnt_link: 
rgba(255, 255, 255, 0.1);
...
var(--bcnt_link);

c'est du css et non du sass. Lorsque tu codes en sass, je te conseille d'oublier cette forme d'écriture. Pourquoi ?
- garder un code uniforme et cohérent
- peu probable que tu puisses faire des calculs sur ces valeurs


Oublie à tout jamais @extend. Ça va te foutre le bordel dans tes fichiers. L'idée derrière @extend et de réutiliser les règles d'un sélecteur. exemple :

.quelque-chose{
    color: white;
    background: orangered;
    font-size: 32px;
}

.autre-chose{
    @extend .quelque-chose;
}

Il est nettement préférable de créer une mixin

@include te permet d'instancier tes mixins et fonction.

Pour finir, quelle est la différence entre une fonction et une mixin ?
Une fonction te permet de faire des calculs et te retourner un résultat. Une mixin est un bloc d'instructions (propriétés + valeurs + selecteur si besoin) réutilisable. Jette un oeil dans la doc officielle
Modifié par niuxe (03 Mar 2022 - 15:43)

Hello niuxe,

Merci de ces réponses, je ne savais pas que --bcnt_link: était du css.
Ok, justement c'est pour rester cohérent dans la façon de procéder que j'ai posé les questions.

Quand à @extend, je m'en doutai un peu vu le peu de tuto dessus. J'hésitai car à force d'étudier par les tutos vidéos, j'y perdais un peu mon latin.

Merci de ces réponses rapides.
Salutations,

niuxe a écrit :
Lorsque tu codes en sass, je te conseille d'oublier cette forme d'écriture. Pourquoi ?
- garder un code uniforme et cohérent
- peu probable que tu puisses faire des calculs sur ces valeurs

Un autre point : avec SASS - ou n'importe quel autre pré/post-processeur -, les calculs et affectations se feront à la compilation du code, une fois pour toute, le navigateur n'aura rien à faire qu'à lire des styles déjà interprétés. Avec les variables CSS on délègue ce travail au navigateur, bof donc.

Je réserverais les variables CSS pour des changements dynamiques de valeurs de propriétés.
Modifié par Olivier C (03 Mar 2022 - 22:06)

Olivier C, merci de cette précision.