Variable property

[gjunge]

See: http://groups.google.com/group/dotless/browse_thread/thread/9d580e75248b3250

Hi,

SHORT VERSION:
Is the following doable:
.bla {
padding-@variable: 5px; //where @variable could be left, right, top, bottom.
}

INTRO:
I'm working on a website that supports both LTR and RTL. So far I made
two stylesheets, one for LTR and one for RTL. The RTL stylesheet
imports the LTR stylesheet and "overrides" those items that are RTL
specific. (padding-right vs padding-left etc).

float: right/left I manage by having a variable called @SIDE (and
@side-opposite) and setting it to the correct side in both stylesheets
(in RTL it is "right", and in LTR it is "left"). In my LTR stylesheet
I write : float : @SIDE

That was the intro....

QUESTION:
I would also like to eliminate the "overriding" issue, to keep my code
more DRY.

The ultimate thing would be if I could make the property variable:

.bla {
padding-@SIDE: 20px;
}

Can this be done?

Thanks a lot.
Gidon

[cloudhead]

Hey, you can do that with pattern matching, let me illustrate:

.blah ()       { color: black }                     // All blahs
.blah(right)  { padding-right: 20px }          // Right blahs
.blah(left)    { padding-left: 20px }           // Left blahs

@side: left;
.class { .blah(@side) }

Output

.class { color: black; padding-left: 20px;}

So in essence, you can match an arbitrary mixin depending on a variable, instead of creating an arbitrary property name.

[jamesfoster]

Gidon, this is in dotless so you could use it as cloudhead suggests.

One issue with this it takes a lot of setting up. instead of potentially having 4 mixins, one each for padding-top, -left, -bottom and -right. you would just have 1.

as an aside. I like the sass sub property syntax...

.class {
  padding: {
    top: 10px;
    left: 20px;
    bottom: 30px;
    right: 40px;
  }
}

this outputs as the usual padding-top: 10px;

perhaps it would be possible to store that in a variable?

@left: 1;
@right: 0;

@mypadding: {
    left: 20px * @left;
    right: 20px * @right;
  }

.class {
  padding: @mypadding;
}

(I'm just thinking out loud, it's probably not very elegant but looks interesting.)

[gjunge]

Looks also nice, though it doesn't look very "lessy", does it?

LESS also doesn't support conditions, or does it?
Because that would also solve it:

.mypadding {
[if @direction="ltr"]
padding-left : 20px;
[else]
padding-right: 20px;
[endif]
}

[cloudhead]

the best solution is the one I proposed imo. Cascading stylesheets shouldn't have logic in them, so if/then/else is not an option.

[jamesfoster]

:)

I love it when people say things like that.

surely, when i write .blah(right) there is logic which determines which mixin to mixin!

there is logic in less. It just doesn't feel like logic because it doesn't include the word "if".

i still like the #{} idea from sass, I just think implementing it would be a nightmare.

[cloudhead]

there's logic in the implementation of course, but not in the stylesheet. It's declarative. Yea, attribute interpolation is powerful, but I don't think we need it.

[gjunge]

Yep, I got your point. I can work with the solution provided in less.js

[dylan]

How would you recommend doing a CSS3 mixin? right now I can do this:
.transition-property(e("box-shadow, top"));
.transition-property(@attr) {
transition-property: @attr;
-webkit-transition-property: e(%("-webkit-%d", @attr));
-o-transition-property: e(%("-o-%d", @attr));
-moz-transition-property: e(%("-moz-%d", @attr));
}

But that only allows for one cross-browser compatible call per selector. :\

[jamesfoster]

How would you prefer to use it?

[dylan]

I am not entirely sure what an elegant way would be to pull this off, not without iterating through arguments and having logic of some sort to modify the strings. :P As it stands there are only a few properties that you would need to do for this sort of thing, but I am spoiled and dont want to do them all by hand. :P

[dylan]

Gradients are another thing that logic would help with generation. Especially considering the differences in browser syntax at the moment. Right now I have to make different gradient mixins, ones that accept 3 arguments, and ones that accept 2. :D

[cloudhead]

Hmm, could you show me the desired CSS output, maybe in a Gist, and I'll see if I can think of anything.

[dylan]

http://gist.github.com/468428

[dancrew32]

Here's my LTR/RTL variable solution: http://stackoverflow.com/questions/5121584/less-how-to-insert-an-variable-into-property-as-opposed-to-the-value/5162599#5162599

[dylan]

nice!