我只是知道我的头发。
我有一个接收简单对象的混合。根据属性之一的值,应在IF语句或ELSE一个内部输入。 但是,它始终将评估为TRUE,无法弄清原因。
代码是使用node-sass(libsass v3.5.4)编译的,其要旨如下:
https://www.sassmeister.com/gist/40eb28fd55173d7534a7162de3c1b960
两次调用calculateHeight mixin都会将if评估为TRUE,并创建一个 CSS,该CSS的颜色为红色:红色,而不是颜色:红色和颜色:蓝色
// ----
// libsass (v3.5.4)
// ----
$headerHeight: 150px;
$headerHeightM: 115px;
$headerHeightS: 100px;
@mixin calculateHeight($obj:()){
@if #{map-get($obj, value)} {
color: red;
@media (min-width: 480px) {
#{map-get($obj, property)}: $headerHeightS;
}
@media (min-width: 768px) {
#{map-get($obj, property)}: $headerHeightM;
}
@media (min-width: 1280px) {
#{map-get($obj, property)}: $headerHeight;
}
}
@else {
color: blue;
@media (min-width: 480px) {
#{map-get($obj, property)}: #{map-get($obj, value)} 233px;
}
}
}
.header{
@include calculateHeight((property: 'height', value: false));
@include calculateHeight((property: "background", value: "url('../img/red_header_wave_1.png') no-repeat center top/100% "));
}
答案 0 :(得分:0)
不知道为什么,但是,如果我将对象属性的值分配给变量,它将起作用并起作用。同样,不知道为什么,但是现在可以正常工作:
// ----
// libsass (v3.5.4)
// ----
$headerHeight: 150px;
$headerHeightM: 115px;
$headerHeightS: 100px;
@mixin calculateHeight($obj:()){
// Assign the mapped property to a variable prior to @if
$var: #{map-get($obj, value)};
@if $var == 'false' {
color: red;
@media (min-width: 480px) {
#{map-get($obj, property)}: $headerHeightS;
}
@media (min-width: 768px) {
#{map-get($obj, property)}: $headerHeightM;
}
@media (min-width: 1280px) {
#{map-get($obj, property)}: $headerHeight;
}
}
@else {
color: blue;
@media (min-width: 480px) {
#{map-get($obj, property)}: #{map-get($obj, value)} 233px;
}
}
}
.header{
@include calculateHeight((property: 'height', value: false));
@include calculateHeight((property: "background", value: "url('../img/red_header_wave_1.png') no-repeat center top/100% "));
}
答案 1 :(得分:0)
您正在将映射中的值内插到字符串中,因此实际上是在检查字符串"false"
,这是正确的(如您所知)。摆脱插值#{...}
,它应能按预期工作。
- @if #{map-get($obj, value)} {
+ @if map-get($obj, value) {