Oblicz procent za pomocą SCSS / SASS


121

Chcę ustawić szerokość w procentach w scss poprzez obliczenia, ale daje mi to błędy.

Nieprawidłowy CSS po „...- width: (4/12)%”: oczekiwane wyrażenie (np. 1px, pogrubienie), było „;”

Chcę zrobić coś takiego

$my_width: (4/12)%;

div{
width: $my_width;
}

jak dodać tam znak%?

To samo pytanie z px i em


1
Nie ma się przy czym bawić. Chcę tylko dodać jednostkę liczby do obliczenia. Tak samo jak (400/20) piks. Jak uzyskać liczbę i piksele / em /% w scss? W ten sposób mógłbym mieć „zmienne globalne”, które mogę zmienić raz
Nick Ginanto

Spróbuj dodać nawias, taki jak $ my_width: ((4/12)%);
Sri

Ups ... Przepraszam, nie miałem okazji tego sprawdzić i jeszcze raz spróbować. {$ My_width: (4/12)%;}
Sri

Odpowiedzi:


211

Czy próbowałeś funkcji procentowej ?

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

1
czy jest podobna funkcja dla px i em?
Nick Ginanto

1
Nie jestem pewien, ale w sekcji źródłowej dokumentacji można zobaczyć logikę leżącą u podstaw: Sass :: Script :: Number.new (value.value * 100, ['%']), więc pomyślałbym, że jeśli nie istnieje, możesz to zrobić bezpośrednio lub samodzielnie utworzyć niektóre funkcje opakowujące.
Tomas

4
@NickGinanto dla px możesz po prostu dodać +pxna końcu linii, np.width: ($foo + $bar) +px
DisgruntledGoat

2
@DisgruntledGoat Nie, nigdy nie powinieneś tego robić w żadnych okolicznościach. Dodawanie jednostek powinno odbywać się przez mnożenie (np. $foo + $bar * 1px), Łączenie jednostek w ten sposób daje tylko ciąg.
cimmanon

@cimmanon czy to się ostatnio zmieniło? Jestem pewien, że tak nie było, kiedy opublikowałem swój komentarz.
DisgruntledGoat

30

Inny sposób:

$my_width: 4/12*100%;

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

Sass wyświetli wartość w%.


13
Zauważ, że musiałem użyć 100/6 * 1%, aby to zadziałało, albo skończyło się na 1666,67%.
sp00n

gdzie mogę znaleźć dokumentację, co właściwie * 100% robi?
Ini,

1

Udało mi się to zrobić w ten sposób:

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

W ten sposób nie musisz używać żadnych specjalnych funkcji.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.