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