css - 减:计算值

Question

我有下面的 less 部分:

@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 类，我该如何添加规则，即 x 值background position 必须保持不变，但 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>