Zmienna Sass w funkcji CSS calc()
Próbuję użyć funkcji calc()
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ę dosłownego 50px
zamiast mojej zmiennej body_padding
, dostaję dokładnie to, czego chcę. Jednak po przełączeniu na zmienną jest to wyjście:
body {
padding-top: 50px;
height: calc(100% - $body_padding);
}
Jak mogę sprawić, by Sass rozpoznał, że musi zastąpić zmienną w funkcji calc
?
7 answers
body
height: calc(100% - #{$body_padding})
W tym przypadku wystarczy border-box :
body
box-sizing: border-box
height: 100%
padding-top: $body_padding
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-10-18 10:27:40
Aby użyć $variables
wewnątrz calc()
właściwości height:
HTML:
<div></div>
SCSS:
$a: 4em;
div {
height: calc(#{$a} + 7px);
background: #e53b2c;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-15 06:55:05
Nawet jeśli nie jest to bezpośrednio powiązane. Ale okazało się, że kod CALC nie będzie działać, jeśli nie umieścić spacje prawidłowo.
Więc to nie działa dla mnie calc(#{$a}+7px)
Ale to zadziałało calc(#{$a} + 7px)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-11-19 16:31:47
Próbowałem tego, a potem naprawiłem mój problem. Będzie obliczać wszystkie media-breakpoint automatycznie według podanej szybkości (base-size/rate-size)
$base-size: 16;
$rate-size-xl: 24;
// set default size for all cases;
:root {
--size: #{$base-size};
}
// if it's smaller then LG it will set size rate to 16/16;
// example: if size set to 14px, it will be 14px * 16 / 16 = 14px
@include media-breakpoint-down(lg) {
:root {
--size: #{$base-size};
}
}
// if it is bigger then XL it will set size rate to 24/16;
// example: if size set to 14px, it will be 14px * 24 / 16 = 21px
@include media-breakpoint-up(xl) {
:root {
--size: #{$rate-size-xl};
}
}
@function size($px) {
@return calc(#{$px} / $base-size * var(--size));
}
div {
font-size: size(14px);
width: size(150px);
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-01-14 20:42:53
Oto bardzo proste rozwiązanie przy użyciu SASS / SCSS i stylu formuły matematycznej:
/* frame circle */
.container {
position: relative;
border-radius: 50%;
background-color: white;
overflow: hidden;
width: 400px;
height: 400px; }
/* circle sectors */
.menu-frame-sector {
position: absolute;
width: 50%;
height: 50%;
z-index: 10000;
transform-origin: 100% 100%;
}
$sector_count: 8;
$sector_width: 360deg / $sector_count;
.sec0 {
transform: rotate(0 * $sector_width) skew($sector_width);
background-color: red; }
.sec1 {
transform: rotate(1 * $sector_width) skew($sector_width);
background-color: blue; }
.sec2 {
transform: rotate(2 * $sector_width) skew($sector_width);
background-color: red; }
.sec3 {
transform: rotate(3 * $sector_width) skew($sector_width);
background-color: blue; }
.sec4 {
transform: rotate(4 * $sector_width) skew($sector_width);
background-color: red; }
.sec5 {
transform: rotate(5 * $sector_width) skew($sector_width);
background-color: blue; }
.sec6 {
transform: rotate(6 * $sector_width) skew($sector_width);
background-color: red; }
.sec7 {
transform: rotate(7 * $sector_width) skew($sector_width);
background-color: blue; }
Podsumowując, zdecydowanie sugeruję, abyś zrozumiał transform-origin
, rotate()
i skew()
:
Https://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-10-22 08:29:24
Możesz użyć swojego słownego #{your verbal}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2019-07-04 09:43:58
Spróbuj tego:
@mixin heightBox($body_padding){
height: calc(100% - $body_padding);
}
body{
@include heightBox(100% - 25%);
box-sizing: border-box
padding:10px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-21 08:23:08