如何解决在@if scss 中使用 css 变量
在创建样式的过程中,我有一个想法,即创建一个 CSS 变量来表示要显示或不显示透明度的布尔值,但不幸的是,我看到条件不起作用!
main.css
:root {
--navbar-transparent: "true";
}
navbar.component.scss
@if var(--navbar-transparent) == "true" {
.nav-booking {
position: absolute;
width: 100%;
background: transparent;
padding-top: 20px;
}
} @else {
.nav-booking{
border-bottom: 2px solid #d6d1d180;
}
}
有没有办法用 css 变量来做到这一点?否则不可能!
解决方法
你可以hack一个像下面这样的if() {}
,但我怀疑你能做一个if() {} else {}
* {
--navbar-transparent: true;
}
.nav-booking {
/* if !true */
padding:var(--navbar-transparent,20px);
border:var(--navbar-transparent,5px solid green);
/* */
background:red;
height:10px;
margin:10px;
}
<div class="nav-booking" ></div>
<!-- you need to set "initial" to get your false -->
<div class="nav-booking" style="--navbar-transparent:initial"></div>
有关获取有关使用 initial
的模式详细信息
How to store inherit value inside a CSS variable (aka custom property)?
CSS custom properties (variables) for box model
,不幸的是,在 sass 中,自定义属性仅被视为字符串,它不关联值。
但是有解决方法:
@function get($var) {
@return map-get($custom-properties,$var);
}
$custom-properties: ();
@each $key,$value in $custom-properties {
:root {
--#{$key}: #{$value};
}
}
将要在 Sass 项目中使用并编译为自定义属性的任何变量添加到此映射:$custom-properties: ();
。
$custom-properties: (
'navbar-transparent': true,//...
);
现在使用 get($var)
访问 Sass 项目中的上述变量。
@function get($var) {
@return map-get($custom-properties,$var);
}
$custom-properties: (
'navbar-transparent': true,);
@each $key,$value in $custom-properties {
:root {
--#{$key}: #{$value};
}
}
@if (get(navbar-transparent)) {
.nav-booking {
position: absolute;
width: 100%;
background: transparent;
padding-top: 20px;
}
} @else {
.nav-booking{
border-bottom: 2px solid #d6d1d180;
}
}
这将编译为:
:root {
--navbar-transparent: true;
}
.nav-booking {
position: absolute;
width: 100%;
background: transparent;
padding-top: 20px;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。