CODEWITHSUNDEEP
cssless
Alon
Alon

Reputation: 11945

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!

Upvotes: 0

Views: 37

Answers (1)

user4994625
user4994625

Reputation:

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

Upvotes: 1

Related Questions