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

css sass

— Nick Ginanto
źródło

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;
}

— Tomas
źródło

czy jest podobna funkcja dla px i em?

— Nick Ginanto

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

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

— DisgruntledGoat

@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

Inny sposób:

$my_width: 4/12*100%;

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

Sass wyświetli wartość w%.

— rlejnieks
źródło

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,

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.

— Enrique Cuchetti
źródło