current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 1 down vote favorite

I'm using LESS to build a site, and want the layout to switch based on direction, either 'ltr' or 'rtl' (direction:rtl)

I set @direction at the top. Then there are certain elements that I want floated left for ltr, and right for rtl. I also want to position absolute, and apply padding-left/right based on the @direction.

Instead of writing out separate mixins for float, pos, and padding I was trying to do something like this:

.mixin (@direction) when (@direction = ltr) {
    @lr:left;
}
.mixin (@direction) when (@direction = rtl) {
    @lr:right;
}

Then call it like this:

ol li {
    float:@lr;
}

and/or

ol li span.date {
    position:absolute;
    @lr:0;
}

That's the idea, but any help would be appreciated. I've looked at guards, and parametric mixins but just can't seem to nail it.

Thanks, Dave

share|improve this question

5 Answers 5

up vote 0 down vote

Your first issue is that variables are actually constants in LESS. So once you set it, it can not be overwritten. When you set @lr to "left", then it will always have "left" as its value, even if you try to reset the variable. Which is the issue with your first idea.

As far as your second idea, LESS does not support using variables as properties, only values. However you can hack around it like so:

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

This isn't very clean, but it does the trick if you absolutely need the functionality. Word is it is in the works for 1.4.

Also, you are calling the mixin incorrectly. Try something like this:

.mixin (@direction) when (@direction = ltr) {
    float: left;
}
.mixin (@direction) when (@direction = rtl) {
    float: right;
}

Then call it like this:

ol li {
    .mixin(ltr);
}

Which should spit this out:

ol li {
    float: left;
}
share|improve this answer
    
Thanks Brian, but that was what I was trying to avoid, explicitly setting the 'float' property. As then I'd also have to do a few other mixins for abs pos and padding left/right. i.e. the same mixin for each l/r for abs pos, and then another for padding etc... Not sure I want to head down the hacky route. Thanks for your comment though. –  davebowker May 23 '12 at 17:06
up vote 0 down vote

I implemented a rtl extension in dotless.. find it on github. That extension reverwses float:left to float:right and margin-left:5px to margin-right:5px. It also supports prefixing properties to control how they are reversed.

Alot more info is available on the dotless wiki for the plugin.

You can find generic information on how to use dotless and plugins also on the wiki.

share|improve this answer
    
Hey Luke, I downloaded dotless but couldn't see exactly where you were referring to. :( I've got a solution now, but maybe yours is better? Have a good holiday, and shoot me a comment next week about your solution. :) –  davebowker May 24 '12 at 11:52
    
Ok, added some more links :) –  Luke Page Jun 3 '12 at 9:09
up vote 1 down vote

I have an idea for your case which solve RTL problem. In each class, we define 2 mixin within it for direction stylesheet properties. The prototype like that:

// @direction variable should be put by somehow
@direction: rlt;

.foo {
  // common properties;
  .dir(@direction);
  .dir(rtl) {
    // RTL properties;
  }
  .dir(ltr) {
    // LTR properties;
  }
}

For example:

// @direction variable should be put by somehow
@direction: rlt;

.foo {
  color: #000000;
  .dir(@direction);
  .dir(rtl) {
    float: left;
    padding-left: 5px;
    background: "rtl.png";
  }
  .dir(ltr) {
    float: right;
    padding-right: 5px;
    background: "ltr.png";
  }
}
share|improve this answer
up vote 1 down vote accepted

OK. After some playing and a bit of thinking this is what I've come up with. If I can't use variables as properties then I'll use @direction, and @directionOpp (opposite of rtl, ltr) to use as a layout helper.

I have 2 variables.

@direction:     ltr; // Change to 'rtl' for arabic, hebrew, etc.
@directionOpp:  rtl; // Make this opposite of @direction, for easier mixins

Here's my mixin for horizontal positioning.

  #dir {
    .dir(ltr,@dist:0) {left: @dist;}
    .dir(rtl,@dist:0) {right: @dist;}
    .float(ltr){float:left; }
    .float(rtl){float:right;}
    .margin(ltr, @dist:@a){margin-left:@dist;}
    .margin(rtl, @dist:@a){margin-right:@dist;}
    .padding(ltr, @dist:@a){padding-left:@dist;}
    .padding(rtl, @dist:@a){padding-right:@dist;}
  }

and here's how I call it.

ol li {
    #dir.float(@direction);
    #dir.padding(@direction);
}

If I ever need to reverse anything, then I can replace @direction with @directionOpp.

I can also specifiy how much @dist I need as it's parametric mixin, and since they're all separate I can have any combination of margin, float, padding etc I need without multiple mixins with hard coded properties.

Good solution? Dave

share|improve this answer
    
I'm assuming @a would have a default value set somewhere, because otherwise this will error when you compile it. –  Brian Hough May 24 '12 at 17:16
    
Yea, @a has a value somewhere. Been building a pretty complex app with this and the mixin looks pretty sturdy, so far. –  davebowker May 25 '12 at 15:17
up vote 0 down vote

Try this Mixins in your LESS files

@rtl:        rtl;
@ltr:        ltr;
@direction:  @rtl;

then Use them like this

html {
    direction: @direction;
}

body{
    direction: @direction;
}

for Left and Right commands you should use these mixins

.DockItem(@location, @value) when (@location = "left") and (@direction = @ltr){
    left: @value;
}

.DockItem(@location, @value) when (@location = "right") and (@direction = @ltr){
    right: @value;
}

.DockItem(@location, @value) when (@location = "left") and (@direction = @rtl){
    right: @value;
}

.DockItem(@location, @value) when (@location = "right") and (@direction = @rtl){
    left: @value;
}

then in your less file you should call this mixins like this

.TestClass{
    .DockItem('left', '100%');
}

Note that I set @direction to RTL so above style would result like this

.TestClass{
    right: 100%;
}

If you set chnage the directionality of the page to LTR it would result like this

.TestClass{
    left: 100%;
}

Let me know if it helps you or not

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.