Question

在SASS中，我喜欢使用简写功能，该功能允许我在此语法中为连字样式编写以下代码：

.a {
  background: {
    color: orange;
    image: url(bg.jpg);
    repeat: no-repeat;
    position: center;
  }
}

LESS中的语法功能是否相同？

Answer 1

不，Less目前没有这样的功能（但它可能是一个很好的功能请求）。以下是我可以在Less中建议的最接近的，但它并没有太大的改进。

.demo{
    @bg: background;
    @{bg}-color: #aaa;
    @{bg}-image: url(img.jpg);
    @{bg}-repeat: no-repeat;
    @{bg}-position: center;
}

或者您可以为所有background-*属性编写mixin并保持代码DRY。以下是一个基本样本（不能原样使用，因为防护是非常基本的）。除此之外，你无能为力。

/* mixin */
.background(@color; @image: none; @repeat; @position) {
    & when (iscolor(@color)){
        background-color: @color;
    }
    & when (isurl(@image)){
        background-image: @image;
    }
    & when (iskeyword(@repeat)){
        background-repeat: @repeat;
    }    
    & when (iskeyword(@position)){
        background-position: @position;
    }
}

/* mixin usage */
.demo{
    .background(black; url(a.jpg); no-repeat; center);
}
#demo1{
    .background(blue; url(demo.jpg); repeat; left);
}

是否可以在LESS中简化带连字符的样式，类似于在SASS中完成的样式

1 个答案: