Comment résoudre le problème des unités incompatibles?
Incompatible units: 'vw' and 'px'. node_modules\@ionic\app-scripts\dist\util\helpers.js:253.replace(/&/g, '&')
L'entrée est:
@include square-size(10vw, 40px, 70px);
Problème:
@mixin square-size($size, $min: $size, $max: $size) {
$clamp-size: min(max($size, $min), $max);
width: $clamp-size;
height: $clamp-size;
}
Mais si j'utilise calc (1vw - 1px) cela fonctionne. (pas de problème d'unité).
par exemple. max (calc (1vw - 1px)) ne fonctionne pas. Parce que pas de nombre pour max .
Dans mon cas, je veux qu'un mixin carré la taille d'un élément. Y compris la pince.
min-width , max-width , etc. ne fonctionnent pas. Ce sera un rect ou une ellipse. Parce qu'il ne garde pas le rapport hauteur / largeur.
Je veux un élément avec une taille dynamique mais avec une taille min et max .
Je comprends que l'unité dynamique vw (Viewport) doit être présent après la compilation sass. Par conséquent, il n'est pas possible de convertir la valeur en une unité fixe.
Mais n'y a-t-il aucun moyen?
5 Réponses :
Vous pouvez le faire comme ceci en utilisant min-width / height et max-width / height pour éviter de mélanger les unités:
@mixin square-size($size, $min: $size, $max: $size) {
min-width: $min;
max-width: $max;
min-height: $min;
max-height: $max;
width: $size;
height: $size;
}
.class {
@include square-size(10vw, 40px, 70px);
}
Merci d'avoir répondu. Mais c'est exactement ma mise en œuvre actuelle. Mais comme je l'ai écrit ci-dessus, il en résultera un rect ou une ellipse dans certains cas. Parce que min-width et min-height et max-width et max-height ne conservent pas les proportions . Je suis désolé si ces informations ne sont pas claires dans la description ci-dessus. Merci quand même. :)
Avez-vous essayé de l'exécuter? Il produira toujours des carrés - essayez de lui donner un second regard :) Voici un exemple de stylo: codepen. io / jakob-e / pen / REBzKw
Vous devrez contourner le compilateur scss et utiliser un littéral à la place.
@mixin square-size($size, $min: $size, $max: $size) {
$clamp-size: #{'min(max(#{$size}, #{$min}), #{$max})'};
width: $clamp-size;
height: $clamp-size;
}
C'est la bonne solution, mais je l'ai négligée la première fois, car je ne pouvais pas voir où les changements pertinents.
Pour cela, au lieu de SCSS @include
.foo {
width:clamp(10vw, 40px, 70px);
height:clamp(10vw, 40px, 70px);
}
utilisez une meilleure fonction css "clamp":
.foo {
@include square-size(10vw, 40px, 70px);
}
Le problème est que si vous avez utilisé SCSS pour un projet entier, SCSS ne compilera pas clamp (), min () ou max () en raison de l'erreur ci-dessus.
C'est du pur CSS. Cela fonctionne très bien. SCSS ne lance pas d'erreur. En vain me mettre un moins.
Ce que vous avez écrit est purement css, mais OP pose des questions sur SCSS - votre code devrait être en ligne ou en tant que fichier .css séparé
J'utilise ce code CSS dans mon SCSS et cela fonctionne très bien, pas de problème avec le compilateur. Une personne pense qu'il existe une solution en SCSS, mais une solution de surface en CSS - c'est plus facile, meilleur, plus élégant!
Mon scss lance une erreur, car CLAMP est une fonction scss qui demande moins / plus d'options que les 3 en css - Si vous exécutez l'ancien scss, il existe de nombreuses fonctions qui ne sont plus pertinentes pour le css moderne, mais échouent car elles les interpréter comme des fonctions. La mise à jour de SCSS peut parfois être une rupture de projet, donc la fonction unquote () est un moyen d'envelopper la pince css dans scss sans avoir à faire face au diable. :)
J'ai pu corriger l'erreur dans React SASS en utilisant la fonction calc.
font-size: calc(max(8vw, 30px));
Si vous ne pouvez pas le contourner d'une autre manière, SCSS a une fonction pour ignorer les choses entre guillemets:
width: max(50px, 5rem);
Cela sera compilé sans les guillemets et sera valide CSS.
width: unquote("max(50px, 5rem)");
Ce sera étrange d'avoir ceci dans votre scss, mais c'est un moyen infaillible de permettre au CSS moderne de ne pas interrompre vos fonctions scss
p >
Puisque Sass est compilé sur le serveur, pas dans le navigateur - les unités
vw(et autres unités relatives) ne peuvent pas être converties en quelque chose, vous pouvez faire des calculs avec.calc ()est calculé par le navigateur, pas par Sass. Pour cette raison, vous devez soit obtenir des valeurs absolues pour effectuer des calculs avec Sass, soit convertir vos équations en expressionscalc ()à calculer dans le navigateur.