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，则x的{{1}}值必须保持不变，但background position值必须加倍？

Answer 1

通过在.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属性。

Answer 2

选项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）

我们现在可以使用Level 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>

减：计算值

2 个答案: