Odejmij piksele od wartości procentowej w SASS?

Question

Wiem, że jesteś w stanie zrobić prostą matematykę w Sass/Scss. Ale czy istnieje sposób na odjęcie pikseli od wartości procentowych? Na przykład:

$image-size: 200px; 

.bio { 
    width: 100% - $image-size; 
} 

Answer 1

nie widzę jak to będzie działać nawet, faktem jest SASS nie może magicznie znać rozmiar twój box będzie miał.

Teraz, gdy otrzymam to, co próbujesz zrobić, najlepszym rozwiązaniem będzie zawarcie szerokości rodzica .box w zmiennej, a następnie odjęcie szerokości obrazu do tej zmiennej - biorąc pod uwagę, że szerokość 100% oznacza, że ​​dostanie 100% pewna szerokość.

Answer 2

Możesz użyć funkcji , aby uzyskać to, co chcesz. Jest to eksperymentalne, ale wciąż jest możliwe pretty good supported przez różne przeglądarki.

Z Sass, można utworzyć calc mixin aby uzyskać to działa na kolejne wersje przeglądarek z -webkit i -moz przedrostków (nie potrzebuje Opera jeden):

@mixin calc($key, $value) { 
    #{$key}: -webkit-calc(#{$value}); 
    #{$key}: -moz-calc(#{$value}); 
    #{$key}: calc(#{$value}); 
} 

i wywołać ją z coś w stylu:

.bio { 
    @include calc("width", "100% - #{$image-size}"); 
}