9

やあ、

あなたが助けてくれることを願っています。

LESSが値だけを返す方法はありますか?

私が持っているとしましょう：

@unit:em;
@basevalue:1;

何かを使って略式のリターンを得ることができますか -

.someClass {  padding: ~'@{basevalue}@{unit}'; }

言うように: 

.returnUnit() { ~'@{basevalue}@{unit}'; }

.someClass {  padding: returnUnit(); }

私が最終的に望んでいるのは： 

.returnUnit(@val) { @basevalue*@val@{unit}; }
.someClass {  padding:returnUnit(0.5); }

ミキシングを使用してスタイル プロパティを定義する必要がありますが、この戻り値関数の値はさまざまな CSS プロパティに使用されます。

私が理にかなっているといいのですが、より深いrtfmが欠けているだけです。

できればどうもありがとう。

ドキュメントへの@Chococrocsポインタとして更新してください、ありがとう。

.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // "call" the mixin
  padding: @average;    // use its "return" value
}
  • 私が必要なもののように見えますか？-ユニット変数にいつでもタグ付けできるかどうかを確認しています....

更新：それは途中で取得します...

.unitRelative(@val) {
  @value : @basevalue*@val;
  @relative: ~'@{value}@{unit}';
}
/* usage */

 .someClass { 
  .unitRelative(2);
  padding: @relative;
}

しかし、いつではない

.someClass {
    .unitRelative(2);
    padding:@relative;
    .unitRelative(3);
    margin:@relative;
}

別の方法はありますか？

4

5 に答える 5

13

LESS はまだ真の「関数」を作成する方法がないため、対処します。

初め

次のように unit 関数を使用できます。

以下

.someClass {  padding: unit(@basevalue, @unit); }
.someOtherClass {  padding: unit(@basevalue*0.5, @unit); }

CSS

.someClass {
  padding: 1em;
}
.someOtherClass {
  padding: 0.5em;
}

2番

関数としてのミックスインは状況によっては問題ありませんが、発見したように、最初の呼び出しで値を 1 回だけ設定するという制限があります (同じ名前の変数がそのスコープにまだ存在しないことを前提としています)。

LESS (最初は正しく機能し、2 番目は機能しません)

.returnUnit(@val:1) { 
    @return: unit(@basevalue*@val, @unit); 
}

.someThirdClass { 
  .returnUnit(0.4); 
  padding: @return;
 }
.someOoopsClass { 
  .returnUnit(0.4); 
  padding: @return; 
  .returnUnit(0.3); 
  margin: @return;
}

CSS出力

.someThirdClass {
  padding: 0.4em;
}
.someOoopsClass {
  padding: 0.4em;
  margin: 0.4em; /* Ooops! Not 0.3em! */
}

三番

.returnUnit()2 番目のアイデアの制限は、次のように によって返される各変数のスコープを分離するため、2 番目のラッピングによって回避できます。

以下

.someAccurateClass { 
    & {
        .returnUnit(0.4); 
        padding: @return;
    } 
    & { 
        .returnUnit(0.3); 
        margin: @return;
    }
}

CSS出力

.someAccurateClass {
  padding: 0.4em;
  margin: 0.3em; /* Yes! */
}

第4

いくつかのグローバル変数を追加してこれを行うことにより、最初と3番目のアイデアをマージする方が良いかもしれません:

以下

@unit:em;
@basevalue:1;
@val: 1;
@setUnit: unit(@basevalue*@val, @unit);

.someAwesomeClass { 
    & {
        @val: .2; 
        padding: @setUnit;
    } 
    & {
        @val: .1; 
        margin: @setUnit;
    }
}

CSS出力

.someAwesomeClass {
  padding: 0.2em;
  margin: 0.1em;
}

したがって、ここではunitまだ最初のアイデアとして関数を使用していますが、変数@setUnitに割り当てているため、変数が呼び出されるたびに関数が実行されます。& {}3 番目のソリューションのような構文を使用してプロパティ ブロックを分離しますが、@val必要なものに を設定し、必要な場所で を呼び出すだけ@setUnitです。

于 2014-04-01T19:48:11.650 に答える
3

私はあなたがこれを探していると思います、Mixin as a function

http://lesscss.org/features/#mixins-as-functions-feature

あなたの質問を読んで、あなたが望んでいることだと思います;D

于 2014-04-01T18:48:26.490 に答える