条件较少的文件

我正在为WordPress的主题编辑器，并想用较少的构建CSS文件时。条件较少的文件

我已经把一个字符串变量是这样的：

@banner-separation-style: 'thick_border';

然后我尝试使用时，（）是这样的：

when (@banner-separation-style = 'thick_border') { 
    header { 
     ... some style 
    } 
    ... and some css selectors 
}

我也尝试组合，而无需引用变量。

如何正确地创建类似的东西，如果块事半功倍？

来源

2016-11-21 frodeborli

下面的答案，请不要在不需要的时候使用引号 - 只是'thick_border'（而不是''thick_border''）就足够了（而且''thick-border'更能计算变量命名的风格）。 –

警卫（when声明）只能与mixin或CSS selector一起使用。不使用其中的一个，我们不能写一个when声明。使用未命名的选择器（&）如下面

@banner-separation-style: 'thick_border'; 
header when (@banner-separation-style = 'thick_border') { 
    border: 2px solid red; 
} 
nav when (@banner-separation-style = 'thick_border') { 
    border: 2px solid green; 
}

或至少：

@banner-separation-style: 'thick_border'; 
& when (@banner-separation-style = 'thick_border') { 
    header { border: 2px solid red; } 
    nav { border: 2px solid green; } 
}

所以，无论是与一个混合像下面写：

@banner-separation-style: 'thick_border'; 
.border-styles() when (@banner-separation-style = 'thick_border') { 
    header { border: 2px solid red; } 
    nav { border: 2px solid green; } 
} 
.border-styles;

，或者直接与像下面的CSS选择

第一个版本（与混入）是我喜欢，因为（a）您不必多次重复的情况就像在CSS选择器版本和（b）给予混合的一个在一个名称中，它比使用未命名的选择器更具可读性。这只是我的选择，其他用户可能更喜欢最后一个，因为它不需要额外的mixin调用语句。

来源

2016-11-21 14:42:29 Harry

mixin工作。在询问之前，我尝试了版本“header when ...”，但它不起作用。现在再试一次，它仍然不起作用。也尝试'体时（...）{ 头{} }“。可能是我的少编译器。 – frodeborli

@frodeborli：该CSS +保护选项在编译器的更高版本（V1.6，如果我没记错的话）只推出，是你的编译器是最新的（或）您使用Less.js像带点一些其他的端口，LessPHP等？这可能是原因。 – Harry

条件较少的文件

回答

相关问题