Alon Alon - 4 months ago 19
Less Question

LESS advanced calculated value

The following LESS works:

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;
}
}
}


But I would like to do something like that:

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;
}
}


But it doesn't work. I get an error that '@bg-pos-y' doesn't exist. And if I declare it in the 'li' selector, it doesn't work expectedly but have a constant value.

Is there any way to do what I want?

Any help will be profoundly appreciated!

Answer

Is this you want to do more or less?

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);
  }
}

OUTPUT

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;
}
Comments