将scss混合设置回true
我正在学习SASS/SCSS,并在玩混音游戏,试图让我的头脑了解各种可接受的变体 下面是我用来创建将scss混合设置回true,css,sass,Css,Sass,我正在学习SASS/SCSS,并在玩混音游戏,试图让我的头脑了解各种可接受的变体 下面是我用来创建框阴影的内容,我使用if和else语句来显示包含或不包含inset属性的以太 @mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) { @if $inset { box-shadow: $inset $horizontal $vertical $b
框阴影的内容,我使用if和else语句来显示包含或不包含inset属性的以太
@mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
@if $inset {
box-shadow: $inset $horizontal $vertical $blur $color;
}
@else {
box-shadow: $horizontal $vertical $blur $color;
}
}
我想知道如何将$inset:false
设置为true
,使其按预期工作
或者有没有更有效的方法来实现我想做的事情?我认为与其包含变量$inset
,不如包含关键字inset
。这样,您可以传递true或false,它将正确解析:
@mixin box-shadow($inset: false, $horizontal: 0px, $vertical: 1px, $blur: 2px, $color: 000) {
@if $inset {
box-shadow: inset $horizontal $vertical $blur $color;
}
@else {
box-shadow: $horizontal $vertical $blur $color;
}
}
.no-inset {
@include box-shadow($inset: false);
}
.inset {
@include box-shadow($inset: true);
}
输出:
.no-inset {
box-shadow: 0px 1px 2px 0;
}
.inset {
box-shadow: inset 0px 1px 2px 0;
}
谢谢你的快速回答。。。我有一个插件。为什么我将值更改为框阴影时,它会输出新的和默认的px?我不理解您的评论。很抱歉,我错误地按了enter键。@包括框阴影(1px 1px 1px#ff6600,$inset:true)代码>正在输出框阴影:插入1px 1px 1px#ff6600 1px 2px但是我才意识到所有的东西都需要用逗号分隔<代码>@包含框阴影(1px,1px,1px,#ff6600,$inset:true)代码>是一种享受。非常感谢。