在mixin-Sass中调用类变量
我有两个类可以设置标题的样式。然后我需要创建一个mixin来定制一个背景模式,这取决于显示的是哪个标题 可以在我的mixin中使用$has dept变量吗在mixin-Sass中调用类变量,sass,zurb-foundation,frontend,Sass,Zurb Foundation,Frontend,我有两个类可以设置标题的样式。然后我需要创建一个mixin来定制一个背景模式,这取决于显示的是哪个标题 可以在我的mixin中使用$has dept变量吗 //header 1 .dt-style-user-bar-without-departments { @extend .dt-style-user-bar; $has-dept: false; /... } //header 2 .dt-
//header 1
.dt-style-user-bar-without-departments {
@extend .dt-style-user-bar;
$has-dept: false;
/...
}
//header 2
.dt-style-user-bar-with-departments {
@extend .dt-style-user-bar;
$has-dept: false;
//...
}
//intending to get $has-dept var to give the proper background color
@mixin set-reveal-bg-color(){
@extend $has-dept;
@if $has-dept {
background: green !important;
}
@else {
background: blue !important;
}
}
//prints the background color in the modal overlay class
.reveal-modal-bg{
@include set-reveal-bg-color()
}
*输出:错误scss/app.scss(scss/_dt_style.scss的第471行:未定义的变量:“$has dept”))*是。只需像这样启用变量插值:
@extend #{$has-dept};
这使得Sass在这里计算变量的值
以下是有关Sass插值的更多信息:您不能对变量使用
@extend
指令,它仅适用于选择器。From:@extend
指令通过告诉Sass一个选择器应该继承另一个选择器的样式来避免这些问题[…]您能展示您想要在CSS中实现什么吗?