1

LESS を使用してサイトを構築していて、'ltr' または 'rtl' のいずれかの方向に基づいてレイアウトを切り替えたい ( direction:rtl)

一番上にセット@directionしました。次に、 ltrの場合は左に、 rtl の場合は右にフロートしたい特定の要素があります。また、絶対配置し、に基づいてパディング左/右を適用したいと考えてい@directionます。

float、pos、padding 用に別々の mixin を書き出す代わりに、次のようなことをしようとしていました。

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

次に、次のように呼び出します。

ol li {
    float:@lr;
}

および/または

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

それがアイデアですが、どんな助けでも大歓迎です。私はガードとパラメトリックミックスインを見てきましたが、それを釘付けにすることはできません.

4

5 に答える 5

1

RTLの問題を解決するあなたのケースのアイデアがあります。各クラスで、方向スタイルシート プロパティ用に 2 つの mixin を定義します。そのようなプロトタイプ：

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

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

例えば：

// @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";
  }
}
于 2012-05-24T04:13:01.207 に答える
1

わかった。色々遊んで色々考えた結果、これにたどり着きました。変数をプロパティとして使用できない場合は、@direction と @directionOpp (rtl、ltr の反対) をレイアウト ヘルパーとして使用します。

私は2つの変数を持っています。

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

これが水平方向の配置のための私の mixin です。

  #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;}
  }

これが私がそれを呼び出す方法です。

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

何かを元に戻す必要がある場合は、 に置き換えることができ@directionます@directionOpp。

また、パラメトリック mixin であるため、必要な @dist の量を指定することもできます。それらはすべて独立しているため、ハードコードされたプロパティを持つ複数の mixin がなくても、必要なマージン、フロート、パディングなどを自由に組み合わせることができます。

良い解決策ですか？デイブ

于 2012-05-24T12:05:15.603 に答える
0

dotless で rtl 拡張を実装しました。githubで見つけてください。その拡張機能は、 float:leftをfloat:rightおよびmargin-left:5pxtoに逆にしmargin-right:5pxます。

また、プロパティのプレフィックスをサポートして、それらがどのように反転されるかを制御します。

プラグインの dotless wiki でさらに多くの情報を入手できます。

dotlessとプラグインの使用方法に関する一般的な情報は wiki にもあります。

于 2012-05-23T18:56:55.110 に答える
0

最初の問題は、変数が実際には LESS の定数であるということです。そのため、一度設定すると上書きできません。@lr を「左」に設定すると、変数をリセットしようとしても、値は常に「左」になります。これはあなたの最初のアイデアの問題です。

2 番目のアイデアに関する限り、LESS は変数をプロパティとして使用することをサポートしておらず、値のみをサポートしています。ただし、次のようにハッキングできます。

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

これはあまりきれいではありませんが、機能が絶対に必要な場合はうまくいきます。1.4の作業中です。

また、ミックスインを間違って呼び出しています。次のようなことを試してください：

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

次に、次のように呼び出します。

ol li {
    .mixin(ltr);
}

これを吐き出す必要があります：

ol li {
    float: left;
}
于 2012-05-23T17:01:47.983 に答える