Question

以下LESS有效：

li{
    background-image: url("images/sprite.png");
    background-position-x: 0;

    &.icon1{
      background-position-y: -900px;

      &:hover{
        background-position-y: -930px;
      }
    }

    &.icon2{
      background-position-y: -1140px;

      &:hover{
        background-position-y: -1170px;
      }
    }

    &.icon3{
      background-position-y: -540px;

      &:hover{
        background-position-y: -570px;
      }
    }  
}

但我想做那样的事情：

li{
    background-image: url("images/sprite.png");
    background-position-x: 0;
    background-position-y: @bg-pos-y;

    &:hover{
       background-position-y: @bg-pos-y - 30;
    }

    &.icon1{
      @bg-pos-y: -900px;
    }

    &.icon2{
      @bg-pos-y: -1140px;
    }

    &.icon3{
      @bg-pos-y: -540px;
    }  
}

但它不起作用。我收到一个错误＆＃39; @ bg-pos-y＆＃39;不存在。如果我在＆＃39; li＆＃39;选择器，它没有预期的工作，但具有恒定的值。

有没有办法做我想做的事？

任何帮助都将深表感谢！

Answer 1

这是你想做更多还是更少？

<强> LESS

.bg-pos-y(@bg-pos-y) {
  background-position-y: @bg-pos-y;
  &:hover {
    background-position-y: @bg-pos-y - 30;
  }
}

li {
  background-image: url("images/sprite.png");
  background-position-x: 0;
  &.icon1 {
    .bg-pos-y(-900px);
  }
  &.icon2 {
    .bg-pos-y (-1140px);
  }
  &.icon3 {
    .bg-pos-y( -540px);
  }
}

<强>输出

li {
  background-image: url("images/sprite.png");
  background-position-x: 0;
}
li.icon1 {
  background-position-y: -900px;
}
li.icon1:hover {
  background-position-y: -930px;
}
li.icon2 {
  background-position-y: -1140px;
}
li.icon2:hover {
  background-position-y: -1170px;
}
li.icon3 {
  background-position-y: -540px;
}
li.icon3:hover {
  background-position-y: -570px;
}

较低的计算值

1 个答案: