我已经为自己编写了一些使用此标准语法的 mixins,它真的很有帮助。但如果某个值出现,我想隐藏一些代码。
这是有效的(断点是假的,~""
代码是默认告诉 LESS 编译为空):
// LESS MIXIN (CURRENT)
.margin(@lg: ~""; @md: ~""; @sm: ~""; @xs: ~""; @xxs: ~"") {
margin: @lg;
@media screen and (max-width: 1200px) {
margin: @md;
}
@media screen and (max-width: 800px) {
margin: @sm;
}
@media screen and (max-width: 600px) {
margin: @xs;
}
@media screen and (max-width: 400px) {
margin: @xxs;
}
}
可以这样实现
// LESS IMPLEMENTATION (CURRENT & EXPECTED)
div {
.margin(20px; ~""; 15px; ~""; 10px);
}
然后会像这样输出:
/* CSS OUTPUT (CURRENT) */
div {
margin: 20px;
}
@media screen and (max-width: 1200px) {
div {
margin: ;
}
}
@media screen and (max-width: 800px) {
div {
margin: 15px;
}
}
@media screen and (max-width: 600px) {
div {
margin: ;
}
}
@media screen and (max-width: 400px) {
div {
margin: 10px;
}
}
它很简单,让我不用为基本样式做大量的@media 断点。但我什至不想打印一个空的@media 行;我希望代码像这样编译:
/* CSS OUTPUT (DESIRED) */
div {
margin: 20px;
}
@media screen and (max-width: 800px) {
div {
margin: 15px;
}
}
@media screen and (max-width: 400px) {
div {
margin: 10px;
}
}
所以...我尝试了一些东西并找到了这个& when
代码here ,但是当我在这里实现它时它似乎不起作用。这是我试过的:
// LESS MIXIN (FAILED ATTEMPT TO SMARTEN)
.margin(@lg: ~""; @md: ~""; @sm: ~""; @xs: ~""; @xxs: ~"") {
& when not (@lg = ~"") {
margin: @lg;
}
& when not (@md = ~"") {
@media screen and (max-width: 1200px) {
margin: @md;
}
}
& when not (@sm = ~"") {
@media screen and (max-width: 800px) {
margin: @sm;
}
}
& when not (@xs = ~"") {
@media screen and (max-width: 600px) {
margin: @xs;
}
}
& when not (@xxs = ~"") {
@media screen and (max-width: 400px) {
margin: @xxs;
}
}
}
有没有人想隐藏可以在 LESS 中运行的@media 代码?
最佳答案
根据参数,有多种方法可以应用混入的各个部分。我能想到的最简单的方法是对守卫使用多个混入。 免责声明:我不建议将这种方法用于媒体查询。
.test {
.example(red; orange; yellow; green; blue);
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when (iscolor(@xl)) {
@media (min-width: 1200px) {
background-color: @xl;
}
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@lg)) {
@media (min-width: 800px) and (max-width: 1199px) {
background-color: @lg;
}
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@med)) {
@media (min-width: 600px) and (max-width: 799px) {
background-color: @med;
}
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@sm)) {
@media (min-width: 400px) and (max-width: 588px) {
background-color: @sm;
}
}
.example(@xl: "", @lg: "", @med: "", @sm: "", @xs: "") when(iscolor(@xs)) {
@media (max-width: 399px) {
background-color: @xs;
}
}
在此示例中,将根据调用混合宏时包含的参数来应用每个部分。
处理媒体查询的更好解决方案是为使用的各种断点声明一些变量。
我经常有一组变量声明:
@extra-small: ~" (max-width: 479px)";
@small: ~"(min-width: 480px) and (max-width: 767px)";
@medium: ~"(min-width: 768px) and (max-width: 1023px)";
@large: ~"(min-width: 1024px) and (max-width: 1199px)";
@extra-large: ~"(min-width: 1200px) ";
有时我会使用 @small 进一步分解它们:@small-begin 和 @small-end
其中 @small-begin
和 @ small-end
是单独的 min-width
和 max-width
声明。
这些变量可以用作:
.test {
background-color: blue;
@media @small {
background-color: green;
}
@media @medium {
background-color: yellow;
}
@media @large {
background-color: orange;
}
@media @extra-large {
background-color: red;
}
}
这种格式的优点是您只需要在断点之间更改的媒体查询中指定样式。您还可以在每个断点内添加多个样式,从而减少输出中重复媒体查询声明的数量。
关于css - 更少的 CSS 混入 : how can i hide styles when variable is a specific value?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37126346/