减：计算值

Question

我有以下一块：

@image-ui-wave-width: 28px;

[...]
.wave {
    &.saw {
        background-position: -@image-ui-tab-height * 2 -@image-ui-tab-height;
    }
    &.triangle {
        background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height;
    }
}
[...]

现在，我如何添加规则：如果这些 .wave 元素中的任何一个也具有类 .selected，则 background position 的 x 值必须保持不变，但 y 值必须加倍?

Answer 1

选项 1：（有更好的浏览器支持）

Less 无法从先前定义的属性中获取值并对其进行任何数学运算。因此，我们必须手动计算并将值分配给属性。由于您已经在使用变量，因此代码更改应该非常简单（如下所示）：

@image-ui-wave-width: 28px;
@image-ui-tab-height: 28px;
.wave {
  &.saw {
    background-position: -@image-ui-tab-height * 2 -@image-ui-tab-height;
    &.selected{
      background-position: -@image-ui-tab-height * 2 -@image-ui-tab-height * 2;
    }
  }
  &.triangle {
    background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height;
    &.selected{
      background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height * 2;
    }        
  }
}

这可以通过使用循环和@index 变量来进一步压缩（如果每个项目的 X 值增加相同的因子）。

下面是如何实现的实现。如您所见，所有 4 个div 元素都有一个渐变背景图像，其中前 28px 由一种颜色拍摄，其他 28px 由其余部分拍摄。

对于那些没有选择的类，显示渐变的第二个颜色（因为 Y 位置是 -28px），对于那些有选择的类，显示渐变的第一个颜色（因为 Y 位置是 -56px并且默认情况下渐变会重复）。

.wave.saw {
  background-position: -56px -28px;
}
.wave.saw.selected {
  background-position: -56px -56px;
}
.wave.triangle {
  background-position: -84px -28px;
}
.wave.triangle.selected {
  background-position: -84px -56px;
}
.wave.saw {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  background-size: 56px 56px;
}
.wave.triangle {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, yellow 50%, orange 50%);
  background-size: 56px 56px;
}
div {
  margin-bottom: 20px;
}

<div class='wave saw'></div>

<div class='wave saw selected'></div>

<hr>

<div class='wave triangle'></div>

<div class='wave triangle selected'></div>

---

选项 2：（较差的浏览器支持 - Browser Compatibility chart is available here）

我们现在可以使用 4 级背景和边框标准做的另一件事是将整个 background-position 拆分为 x 和 y 部分，这样x 的位置就不必重复了。这最初是从 CSS3 规范中删除的，但现在似乎可以使用，如 here 所述。

@image-ui-wave-width: 28px;
@image-ui-tab-height: 28px;

.wave {
    &.saw {
        background-position: -@image-ui-tab-height * 2 -@image-ui-tab-height;
        &.selected{
            background-position-y:  -@image-ui-tab-height * 2;
        }
    }
    &.triangle {
        background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height;
        &.selected{
            background-position-y: -@image-ui-tab-height * 2;
        }        
    }
}

下面是这种方法的实现，我们只用更具体的选择器覆盖 background-position-y 值：

.wave.saw {
  background-position: -56px -28px;
}
.wave.saw.selected {
  background-position-y: -56px;
}
.wave.triangle {
  background-position: -84px -28px;
}
.wave.triangle.selected {
  background-position-y: -56px;
}
.wave.saw {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, red 50%, green 50%);
  background-size: 56px 56px;
}
.wave.triangle {
  width: 56px;
  height: 28px;
  background-image: linear-gradient(to bottom, yellow 50%, orange 50%);
  background-size: 56px 56px;
}
div {
  margin-bottom: 20px;
}

<div class='wave saw'></div>

<div class='wave saw selected'></div>

<hr>

<div class='wave triangle'></div>

<div class='wave triangle selected'></div>

Answer 2

这不能通过向 .wave 选择器添加另一个类 (.selected) 来解决吗？

.wave {
    [yourcode]
}
.wave.selected {
    &.saw {
        background-position: -@image-ui-tag-height * 2 -@image-ui-tab-height * 2;
    }
    &.triangle {
     background-position: -@image-ui-tab-height * 3 -@image-ui-tab-height * 2;
    }
}

注意
.wave.selected 必须在 .wave 选择器之后，因为最后一个会覆盖 css 属性。