28172 sujets

CSS et mise en forme, CSS3

Convertir fonction SCSS en CSS native

Bonjour,
Comment convertir cette fonction SCSS en CSS native ?
// PX to REM
$font-size: 16px;
@function rem($target) {
    @if $target == 0 { @return 0 }
    @return 1rem * $target / $font-size;
}


Merci de votre aide.
Modérateur
Bonjour,

On ne peut pas convertir la fonction elle-même (comme l'a fort bien signalé vzytoi, il n'y a pas de possibilité de définir des fonctions en css). On ne peut que convertir ses effets.

Par exemple :
$font-size: 16px;
@function rem($target) {
    @if $target == 0 { @return 0 }
    @return 1rem * $target / $font-size;
}

div {
    width: rem(32px);
}

sera converti en
div {
  width: 2rem;
}

Amicalement,
vzytoi a écrit :
il est impossible de faire de fonction en CSS ...

Et c'est bien pour cela que les préprocesseurs ont été créés. Pour les fonctions et aussi pour les variables qui, elles, sont désormais implémentées dans le CSS, ce qui rend les préprocesseurs un peu moins utiles dans certains cas.
Modifié par Olivier C (02 Jan 2021 - 11:27)
Les variables SCSS restent bien plus poussées que celles en CSS, ils ont un train d'avance
Administrateur
vzytoi a écrit :
Les variables SCSS restent bien plus poussées que celles en CSS, ils ont un train d'avance


Hello,

C'est une façon de voir les choses.

Il faut quand même se dire que les "variables" SCSS sont en réalité des constantes puisqu'une fois compilées elles n'ont plus rien à voir avec des variables... contrairement aux "variables" CSS qui sont vraiment variables selon des contextes différents (media queries par exemple ou action de l'utilisateur)
Raphael a écrit :
[...] contrairement aux "variables" CSS qui sont vraiment variables selon des contextes différents (media queries par exemple ou action de l'utilisateur).

Oh, bien ! Je n'ai jamais pensé à ce cas de figure. Il faudra que je me penche sur la question afin d'en exploiter les possibilités.
Modifié par Olivier C (02 Jan 2021 - 20:40)
Sujet clos
Aller à