web-dev-qa-db-fra.com

Faire des maths sur des arguments variables

J'aime utiliser des unités rem avec des pixels de secours pour mon dimensionnement CSS et j'essaie de faire des mixins pour aider à cela. Pour la taille de police, c'est simple:

@mixin font-size($size) {
  font-size: $size + px;
  font-size: ($size / 10) + rem;
}

Mais pour le remplissage, la marge, etc., le mixin doit accepter des arguments variables, ce qui est possible selon la documentation Sass http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_arguments

Cependant, avec le mixin suivant, au lieu de diviser par 10, le mixin ajoute simplement une barre oblique entre les nombres. C'est ça:

@mixin padding($padding...) {
    padding: $padding + px;
    padding: ($padding / 10) + rem;
}
.class {
    @include padding(24);
}

Produit ceci:

.class {
    padding: 24px;
    padding: 24/10rem;
}

Au lieu de cela, comme je m'y attendrais:

.class {
    padding: 24px;
    padding: 2.4rem;
}

Existe-t-il un moyen de s'assurer que Sass reconnaît les variables sous forme de nombres et utilise donc correctement l'opérateur de division?

De plus, après avoir testé plus, j'ai réalisé que la concaténation n'a lieu que sur la dernière variable.

csssassmixins
21
Doug Hamlin

Il semble que ce que j'avais vraiment besoin d'utiliser ici était une liste plutôt qu'un argument variable afin de manipuler chaque valeur séparément.

J'ai d'abord essayé de le faire avec la directive @each, mais je n'ai pas pu comprendre comment l'utiliser dans une déclaration. Cela génère une erreur:

@mixin padding($padding) {
   padding: @each $value in $padding { $value + px };
   padding: @each $value in $padding { ($value / 10) + rem };
}

J'ai donc fini par écrire quelque chose de beaucoup plus verbeux qui traite chacun des quatre cas possibles séparément (c'est-à-dire que vous passez 1, 2, 3 ou 4 arguments). Cela ressemble à ceci et fonctionne comme je le voulais:

@mixin padding($padding) {
    @if length($padding) == 1 {
        padding: $padding+px;
        padding: $padding/10+rem;
    }
    @if length($padding) == 2 {
        padding: nth($padding, 1)+px nth($padding, 2)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem;
    }
    @if length($padding) == 3 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem;
    }
    @if length($padding) == 4 {
        padding: nth($padding, 1)+px nth($padding, 2)+px nth($padding, 3)+px nth($padding, 4)+px;
        padding: nth($padding, 1)*0.1+rem nth($padding, 2)*0.1+rem nth($padding, 3)*0.1+rem nth($padding, 4)*0.1+rem;
    }
}

J'ai créé une collection de mixins rem, y compris celui-ci en tant que Gist ici https://Gist.github.com/doughamlin/7103259

20
Doug Hamlin

Essaye ça:

padding: #{$padding / 10}rem;

La concaténation dans SASS/SCSS utilise la syntaxe Ruby, et vous mélangiez une équation mathématique suivie d'une concaténation, qui est un mélange de type variable, il n'est donc pas surprenant pour moi que cela n'ait pas fonctionné.

Les expressions et les variables incluses dans # {ici} sont évaluées comme si elles étaient séparées du reste de la ligne, et donc ne transtypent pas le reste de la ligne. Est également utile si votre sortie est citée alors que vous ne vous y attendiez pas (tout comme la fonction unquote ())

19
Owen C. Jones