Question

I have the same block of code repeated with two different variables. This block of code is repeated many, many times so I was thinking to help manage this stylesheet I would convert it over to LESSCSS.

I am quite new with LESS CSS but am getting a compile error so I guess what I am trying to do is not possible they way I am approaching it.

.item(@name,@loc) {
    @name .icon { background: url(..) -24px @loc no-repeat; }
    .theme-purple @name .icon { background: url(..) 0 @loc no-repeat; }
    .theme-green @name .icon { background: url(..) -48px @loc no-repeat; }
    .theme-yellow @name .icon,
    .theme-orange @name .icon { background: url(..) -72px @loc no-repeat; }
    .theme-red @name .icon { background: url(..) -96px @loc no-repeat; }
}

.item('type',-24px);

Is something like this possible?

Answer 1

You’re close. The first issue is your use of variables. You need to take a look at @arguments. I’m not 100% clear about what you are trying to accomplish (possibly some code for sprites), but let me give you an example:

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}

.box-shadow(2px, 5px);

You set your variables, followed by their default if they are not specified. Then you use @arguments to place them into your mixin. Since this is just a background image you will only have one. You then apply that mixin to a particular selector.

It looks like you are trying to put mixins within selectors to use as a mixin, which isn’t possible. You also can’t place variables within selectors within selectors for a variety of reasons. The most important being scope. Variables are constants in LESS, so once you set that local global variable it can not be changed.

It would be easier to maybe do it like this:

.sprite (@path: url(..), @loc1: 0, @loc2: 0, @repeat: no-repeat;) { 
        background: @arguments;         
}

.foo { 
        .sprite('url(..)', -96px, -24px);
}

Should output:

.foo {
        background: url(..) -96px -24px no-repeat;
}

Keep in mind you can not skip the first parameter in LESS arguments, so you will always need to declare the url in this example.