Berechnen Sie einen Prozentsatz mit SCSS / SASS

121

Ich möchte eine Breite in Prozent in scss über die Berechnung festlegen, aber es gibt mir Fehler.

Ungültiges CSS nach "...- Breite: (4/12)%": erwarteter Ausdruck (z. B. 1px, fett) war ";"

Ich möchte so etwas tun

$my_width: (4/12)%;

div{
width: $my_width;
}

Wie füge ich dort das% -Zeichen hinzu?

Gleiche Frage mit px und em

css sass

— Nick Ginanto
quelle

Es gibt nichts zu fummeln. Ich möchte nur die Einheit der Zahl zur Berechnung hinzufügen. Gleich wie (400/20) px. Wie habe ich eine Zahl und px / em /% in scss? Auf diese Weise könnte ich "globale Variablen" haben, die ich einmal ändern kann

— Nick Ginanto

Versuchen Sie, eine Klammer wie $ my_width hinzuzufügen: ((4/12)%);

— Sri

Ups .. Entschuldigung, ich hatte keine Gelegenheit, dies zu überprüfen und noch einmal zu versuchen. {$ My_width: (4/12)%;}

— Sri

Antworten:

211

Haben Sie den Prozentsatz ausprobiert ? ?

$my_width: percentage(4/12);
div{
width: $my_width;
}

— Tomas
quelle

Gibt es eine ähnliche Funktion für px und em?

— Nick Ginanto

Ich bin mir nicht sicher, aber im Quellabschnitt der Dokumentation sehen Sie die zugrunde liegende Logik: Sass :: Script :: Number.new (value.value * 100, ['%']), also würde ich das denken, wenn sie es nicht tun vorhanden können Sie dies direkt tun oder einige Wrapper-Funktionen selbst erstellen.

— Tomas

@ NickGinanto für px können Sie einfach +pxam Ende der Zeile hinzufügen , zBwidth: ($foo + $bar) +px

— DisgruntledGoat

@DisgruntledGoat Nein, sollten Sie nie tun jemals unter keinen Umständen. Das Hinzufügen von Einheiten sollte durch Multiplikation (z. B.) erfolgen. Wenn Sie $foo + $bar * 1pxdie Einheit so verketten, erhalten Sie nur eine Zeichenfolge.

— Cimmanon

@cimmanon hat sich das kürzlich geändert? Ich bin mir sicher, dass dies nicht der Fall war, als ich meinen Kommentar gepostet habe.

— DisgruntledGoat

Ein anderer Weg:

$my_width: 4/12*100%;

div{
width: $my_width; // 33.33333%
}

Sass gibt den Wert in% aus.

— rlejnieks
quelle

Beachten Sie, dass ich 100/6 * 1% verwenden musste, damit dies für mich funktioniert, sonst habe ich 1666,67% erhalten.

— sp00n

Wo finde ich eine Dokumentation, was * 100% tatsächlich tut?

— Ini

Ich konnte es so machen:

div{
   width: (4/12)* 1%;
   }

Auf diese Weise müssen Sie keine spezielle Funktion verwenden.

— Enrique Cuchetti
quelle