2

common.lessさまざまなスキンの基本的な CSS を実装するファイルがあります。

@textColor: black;
@iconSize: 16px;

.container: {
    color: @textColor;
    background-color: white;
}
.icon: {
    width: @iconSize;
    height: @iconSize;
}
// note that @iconSize is also used in this file inside mixins

計画は次のように使用することですskin_1.less：

@iconSize: 32px; // override the icon size
                 // but leave @textColor as default
@import "common.less";

.container: {
    color: red;
}
// I would now have big icons and red text

したがって、変数を再利用して選択的にオーバーライドできる共通のスタイルが必要です。

ただし、これは機能しません。インポートは常に一番上に移動されるため、変数を事前に定義できないためだと思います。（また、変数はかなり定数であることも読んだので、それは別の問題かもしれません。）

とにかく:私のユースケースを解決するためのより良いパターンはありますか?

4

1 に答える 1

3

ファイルを分割する必要はありません。インポート後に変数をオーバーライドするだけです。変数は、それが使用された場所の後であっても、常に最後の定義として解決されます。

于 2013-09-14T07:34:47.570 に答える