Question

我有两个不同变量重复的相同代码块。这段代码重复了很多次，所以我想帮助管理这个样式表，我会把它转换成LESSCSS。

我对LESS CSS很新，但是我遇到了编译错误，所以我想我想要做的事情是不可能的，因为我正在接近它。

.item(@name,@loc) {
    @name .icon { background: url(..) -24px @loc no-repeat; }
    .theme-purple @name .icon { background: url(..) 0 @loc no-repeat; }
    .theme-green @name .icon { background: url(..) -48px @loc no-repeat; }
    .theme-yellow @name .icon,
    .theme-orange @name .icon { background: url(..) -72px @loc no-repeat; }
    .theme-red @name .icon { background: url(..) -96px @loc no-repeat; }
}

.item('type',-24px);

这样的事情可能吗？

Answer 1

你很亲密。第一个问题是你使用变量。你需要看看@arguments。我不是100％清楚你想要完成什么（可能是精灵的一些代码），但是让我举个例子：

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.box-shadow(2px, 5px);

您可以设置变量，如果未指定变量，则设置默认值。然后使用@arguments将它们放入mixin中。由于这只是一张背景图片，因此您只有一张。然后，将mixin应用于特定的选择器。

看起来你正试图将mixins放在选择器中用作mixin，这是不可能的。由于各种原因，您也无法在选择器中的变量器中放置变量。最重要的是范围。变量是LESS中的常量，因此一旦设置了本地全局变量，就无法更改它。

这样做会更容易：

.sprite (@path: url(..), @loc1: 0, @loc2: 0, @repeat: no-repeat;) { 
        background: @arguments;         
}

.foo { 
        .sprite('url(..)', -96px, -24px);
}

应输出：

.foo {
        background: url(..) -96px -24px no-repeat;
}

请记住，你不能跳过LESS参数中的第一个参数，所以你总是需要在这个例子中声明url。

变量和较少的CSS，这是可能的，或者我怎样才能实现类似的东西？

1 个答案: