Próbuję użyć tej calc()
funkcji w arkuszu stylów Sass, ale mam pewne problemy. Oto mój kod:
$body_padding: 50px
body
padding-top: $body_padding
height: calc(100% - $body_padding)
Jeśli użyję literału 50px
zamiast mojej body_padding
zmiennej, otrzymam dokładnie to, czego chcę. Jednak po przełączeniu na zmienną jest to wynik:
body {
padding-top: 50px;
height: calc(100% - $body_padding); }
Jak sprawić, by Sass rozpoznał, że musi zastąpić zmienną w calc
funkcji?
Odpowiedzi:
Interpolacja :
W tym przypadku wystarczy również ramka :
źródło
box-sizing: border-box;
byłby, moim zdaniem, idealnym sposobem na przejście. Ogólnie rzecz biorąc, model rozmiaru pudełka powinien mieć wartość tcalc(100% - var(--body_padding))
Aby użyć
$variables
wewnątrzcalc()
właściwości wysokości:HTML:
SCSS:
źródło
Mimo że nie jest to bezpośrednio powiązane. Odkryłem jednak, że kod CALC nie zadziała, jeśli nie wstawisz spacji poprawnie.
Więc to nie działało dla mnie
calc(#{$a}+7px)
Ale to zadziałało
calc(#{$a} + 7px)
Zajęło mi to kiedyś, żeby to rozgryźć.
źródło
Próbowałem tego, a następnie naprawiłem problem. Obliczy wszystkie punkty przerwania mediów automatycznie według podanej prędkości (wielkość podstawowa / wielkość stawki)
źródło
Oto naprawdę proste rozwiązanie wykorzystujące SASS / SCSS i styl formuły matematycznej:
Podsumowując, zdecydowanie zalecamy, aby zrozumieć
transform-origin
,rotate()
iskew()
:https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
źródło
możesz użyć swojego werbalnego
#{your verbal}
źródło
variable
ale biorąc pod uwagę, że OP wie, co to jest zmienna (określają$body_padding
w swoim kodzie), co dodaje twoja odpowiedź?Spróbuj tego:
źródło