P{ a{} } ?

Bonjour,
Sur le live twitch d'un dev web (que je ne retrouve plus car c'était suite à un raid) il m'a semblé le voir intégrer une règle css à l'intérieur d'une autre règle css.

Genre :

p { a {...} }

.

Comme on le fait pour les media queries. Est-ce une possibilité que je ne connais pas encore ou lié à un framwork particulier ?

Merci.

Quel en est l'intérêt quand on peut écrire

p  a {...} 

?

Bonjour,

Il est possible que ce soit du sass/scss. On transforme ensuite le code via un interpréteur (ou un pré-processeur) pour produire du code css valide.

L'un des intérêts du scss est de pouvoir écrire du code plus concis qu'en css, avec des variables, des conditions, des boucles ... Si on fait beaucoup de code, on peut espérer maitriser le langage et gagner du temps. Sinon, on est à peu près sûr d'en perdre (selon moi) !

Les navigateurs ne comprennent pas directement le sass/scss (pour l'instant ?). Il faut transformer le code en css pour que ça puisse fonctionner.

Amicalement,

@kerlutinoec
Pour factoriser. Au lieu de :

p a {...}
p li {...}

on aurait

p {
    a {...}
    li {...}
}

@parimonhi Merci.

jlba a écrit :
@kerlutinoec
Pour factoriser. Au lieu de :

p a {...}
p li {...}

on aurait

p {
    a {...}
    li {...;
}

L'intérêt notamment si on créé ses propres classes

.maclasse {
p{...}
li{...}
}
.maclassemodifiee {
p{...}
li{...}
}

@parsimonhi Merci.

Modifié par jlba (18 Nov 2021 - 15:15)

oui, comme le dit parsimonhi il faut utiliser sass/scss. la différence entre les deux c'est juste la syntaxe (un a des accolades, pas l'autre)

permet d'écrire du pseudo css plus complexe et qui est traduit(builder) en css pour tes pages webs.

dans un projet SF j'utiliser le webpack ENCORE pour watcher mes fichiers scss dans lesquels je codé et à chaque ctrl+s il me builder en sortie mon fichier css. et mon html prenant en compte que le css.
Modifié par JENCAL (18 Nov 2021 - 15:53)