使用变量名的SASS @if语句

我遇到了使用基于变量的@if语句生成正确代码的问题。使用变量名的SASS @if语句

SASS

=band($name, $color) 
     .band-#{$name} 
     background-color: #{$color} 
     @if $name == white 
      font-size: 100px 
     @else 
      font-size: 20px 

    +band('white', $white) 
    +band('black', $black)

产生

.band-white{background-color:white; font-size:100px;} 
    .band-black{background-color:black; font-size:50px;}

来源

2017-05-22 brad

-1

我怀疑这是一个空白的问题。你在日志中有什么用处？

我能得到一个版本的代码工作的：

@mixin band($name) 
    background-color: $name 
    @if $name == white 
    font-size: 50px 
    @else 
    font-size: 20px 

.band-white 
    @include band($name: white) 

.band-black 
    @include band($name: black)

而且你可以看到它在这里工作https://codepen.io/sitrobotsit/pen/aWQxNE

来源

2017-05-22 04:25:24 LWilson

这是一个完全不同的结局是什么@brad正在努力实现。 –

@PatrikAffentranger是的，也许我应该问过通过冗余参数背后的推理。然而，结果（编译后的CSS）正是OP之后的一个不太冗长的庄园。所以我不认为投票是有必要的。 – LWilson

IMO，结果是不同的，因为@brad希望能够根据第一个参数自动生成类名。将它们写出来然后使用mixin仅用于'background-color'就不同了。 –

的问题是，你的mixin是比较正在进入与变量一种颜色。

您正在传递字符串'white'，它与HTML颜色white不同。

看看SassScript DataTypes。

所以，要解决你的无礼，你将不得不要么更改您的代码

=band($name, $color) 
    .band-#{$name} 
    background-color: #{$color} 
    @if $name == 'white' 
     font-size: 100px 
    @else 
     font-size: 20px 

+band('white', $white) 
+band('black', $black)

或

=band($name, $color) 
    .band-#{$name} 
    background-color: #{$color} 
    @if $name == white 
     font-size: 100px 
    @else 
     font-size: 20px 

+band(white, $white) 
+band(black, $black)

后者不会给你什么有用的东西，如果你在什么比其他人处理，作为第一个参数的颜色。

顺便问一下，你也可以通过使用单行如果万一你正在使用的Sass 3.3或简化条件较高： font-size: if($name == white, 100px, 20px)

来源

2017-05-23 03:32:56

使用变量名的SASS @if语句

回答

相关问题