1

Instead of repeating this CSS in my .less file. Would anyone know how to create a LESS function for the following?

li  #prize-1 span {
                background: url('@{imagesUrl}/1.png') no-repeat;
                width: 874px;
                height: 188px;
            }   
li  #prize-2 span {
                background: url('@{imagesUrl}/2.png') no-repeat;
                width: 874px;
                height: 188px;
            }
user1381806
  • 509
  • 1
  • 5
  • 18

1 Answers1

0

Would it not be something like this

.definition (@image: nameOfImageDefault) {
  background: url('@{imagesUrl}/@{image}') no-repeat;
  width: 874px;
  height: 188px;
}

li  #prize-1 span {
    .definition(nameOfImage);
        }   
li  #prize-2 span {
    .definition(nameOfImage);
}

I am not that familiar with LESS so I think this works

Edit:

I am following this example from their homepage

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

also which part did not work? the background image? maybe try to take in the entire image path with the name as the variable

Huangism
  • 16,278
  • 7
  • 48
  • 74
  • @user1381806 can you try defining the imageUrl as in use the path and not the variable in .definition I don't have LESS installed so I can't test it. Can you post your code. – Huangism Jun 01 '12 at 15:57
  • I edited my answer, source http://stackoverflow.com/questions/6334644/less-css-set-dynamic-background-image-with-mixin I just added {} around "image" I am sure it is something like that if not exactly that but there is a way for sure – Huangism Jun 01 '12 at 16:09