1

What I want to do is to create a mixin that takes arguments and uses one or more of the arguments as names for other mixins to be included.

as I'm not sure about the proper terms, I'll try to explain through example:

@gradients{
    light:#fafafa; //Should these also be prefixed with @?
    dark:#888888;
}
@gradientBackground(@name,@height){
    background-image:url('../img/gradients/{@name}-{@height}.png'); //this works
    background-color:@gradients[@name];
}

.someBox{
    @gradientBackground(light;150);
}

//Expected result:
.someBox{
    background-image:url('../img/gradients/light-150.png'); //This works
    background-color:#fafafa; //This doesn't work.
}

The image works but I haven't yet figured out how to reference the appropriate color from @gradients. Is this possible at all?

Harry
  • 87,580
  • 25
  • 202
  • 214
jpeltoniemi
  • 5,320
  • 7
  • 24
  • 34
  • Can't you use @dark_gradient and @light_gradient instead? – Stephen Chung Mar 25 '11 at 10:17
  • I could and in the end did, but I was looking for a more elegant solution. I could compare it to arrays in php or any other language. If you have a lot of colors to store, would you prefer having one single array that can be accessed easily as a group and is clean in code or a different variable for every color? :) – jpeltoniemi Mar 28 '11 at 14:03

1 Answers1

2

I don't think you'd need @gradients variable at all. Just define your variables:

@light:#fafafa;
@dark:#888888;

Your mixin should not start with @, that defines a variable. A mixin is basically just a class.

.gradientBackground(@name:@dark, @height:500){
    background-image:url('../img/gradients/{@name}-{@height}.png');
    background-color:@name;
}

Just as an example I set the attributes for the mixin to be the @dark color and 500 for the height.

Then when you want to use your mixin in another definition it would be like so:

.somebox {
    .gradientBackground(@light, 150);
}

So at the point were you are using the mixin you can either keep the default values or pass new ones (ie: @light & 150)

Hope that helps!

Jonathan Miller
  • 1,786
  • 1
  • 16
  • 26
  • That's how I finally decided to do. I asked, because the LessPhp documentation (http://bit.ly/8kBTyS) is a bit unclear and at that time there weren't any better examples. So this was more like a 'can I do this' type of question :) My main goal with this was to make the code more clean by having colors and theme-related variables in their own mixin groups so they can be accessed with common names, but I guess it's impossible after all. – jpeltoniemi Mar 28 '11 at 13:53