1

color同じとを共有する必要がある 20 ～ 30 の要素がありfont-familyます。したがって、私はそれをミックスインとして設定しました。cnとして識別された Web サイトの<html class='cn'>フォントはmango-arialで、 は であるjp必要がありますhentai-arial。

次の歌う CSS 結果ファイルが必要です。

html.cn .div
{   
    color:green;
}

html.jp .div 
{
    color:yellow:
}

私は、次の少ないコードを試しています。各ルールは個別の言語ファイルで定義されています。

-- in cn.less
html.cn
{
    .textColor { color:green}
}

-- in jp.less
html.jp
{
    .textColor { color: yellow} 
}

-- in general.less
.div {.textColor;}
.someOtherElement1 { .textColor; otherstyles:here;}
.someOtherElement2 { .textColor; otherElem2Styles:here;}
...

注意してください、すべての言語オーバーライドを個別の less ファイルに入れたいのです。

4

1 に答える 1

3

新しい答え

あなたが望むものは、まさに簡単な仕事ではありません。LESS は、意図したとおりに実行できるようには設計されていません。しかし、私はあなたのために働く何かを得る方法を見つけたと信じています.

言語仕様を定義する

言語の定義方法を変更する必要があることに注意してください。ただし、言語は別のファイルで定義できます。以下は例です。ノート：

  1. 言語のインデックス番号は、言語 mixin の最初の部分として定義する必要があります (これについては後で説明します)。これは、その言語に固有の非ゼロ、正である必要があり、すべての言語は 1 から任意の順序である必要があります (番号をスキップしないでください)。言語をアルファベット順に出力したい場合は、それらに逆の番号を付ける必要があります (したがって、「z」開始言語は 1 から番号付けを開始し、「a」開始言語は最後と最大の番号を保持します)。
  2. これらのファイルは、言語のhtml.lgコードを自動的に追加します。そのコードはmixin 部分lgで定義する必要があります。.htmlAppend
  3. 必要なプロパティ ( などtextColor) に対して、これらの言語で getter mixin を定義する必要があります。定義しているクラスに複数のプロパティが必要で、それらをグループとして定義したくない場合 (そのため、個別にアクセスしたり、グループとしてアクセスしたい場合があります)、個別のグループ getter を定義する必要があります(colorPkg例については、以下のゲッターを参照してください)。

言語ファイル コード

// in cn file 

.lang(1, @class, @prop) { //cn
   .htmlAppend(@class, @prop);

   .htmlAppend(@class, @prop) {

      (~"html.cn @{class}") { //lang code here
         .getProp(@prop);
      }

      .getProp(textColor){
         color: green;
      }
      .getProp(bkgColor) {
         background-color: #fff;
      }
      .getProp(colorPkg) {
         .getProp(textColor);
         .getProp(bkgColor);
      }
   }
}

// in jp file 

.lang(2, @class, @prop) { //jp
   .htmlAppend(@class, @prop);

   .htmlAppend(@class, @prop) {

      (~"html.jp @{class}") { //lang code here
         .getProp(@prop);
      }

      .getProp(textColor){
         color: yellow;
      }
      .getProp(bkgColor) {
         background-color: #000;
      }
      .getProp(colorPkg) {
         .getProp(textColor);
         .getProp(bkgColor);
      }
   }
}

メインファイルのコア変数とミックスイン

言語固有の LESS ファイルをインポートし、それに続いて、以下に示すように他のいくつかを定義します。ノート：

  1. インポートする言語の最大数で変数を定義する必要があります。
  2. 次のコードは、この投稿が私に手がかりを与えたhereのようなループ構造を使用しています。これが、言語に連続したインデックス番号が必要な理由です。数値 ZERO はループを終了するため、インデックスは正でなければなりません。

コア メイン ファイル コード

// in main file
//must tell it the maximum number of languages defined, 
//and they must be numbered in sequence
@numLang: 2; 

//a getter function for all languages
.getLangProp(@class, @prop, @index: @numLang) when (@index > 0) {
     //get and define the language specific class
     .lang(@index, @class, @prop);

     // next iteration
     .getLangProp(@class, @prop, @index - 1);
}

// end the loop when index is 0
.getLangProp(@class, @prop, 0) {}

クラス情報を定義する

これは、言語の側面を必要とするすべてのクラスに対して 2 段階で行われます。最初に、言語ファイルで定義されているパターン マッチング名を使用して、言語ファイルからプロパティまたはプロパティ セットを呼び出します。次に、他の基本クラスを定義します。「クラス」は、任意の種類のセレクター文字列にすることができることに注意してください (3 番目の例を参照)。

メイン ファイル: 言語固有のクラス コードの定義

.getLangProp(".myClass1", textColor);
.myClass1 {
    height: 20px;
    width: 40px;
}

.getLangProp(".myClass2", bkgColor);
.myClass2 {
    position: absolute;
    top: 10px;
}

.getLangProp(".parent > .myClass3", colorPkg);
.parent {
    & > .myClass3 {
       float: right;
    }
}

この CSS を出力するもの

html.jp .myClass1 {
  color: yellow;
}
html.cn .myClass1 {
  color: green;
}
.myClass1 {
  height: 20px;
  width: 40px;
}
html.jp .myClass2 {
  background-color: #000;
}
html.cn .myClass2 {
  background-color: #fff;
}
.myClass2 {
  position: absolute;
  top: 10px;
}
html.jp .parent > .myClass3 {
  color: yellow;
  background-color: #000;
}
html.cn .parent > .myClass3 {
  color: green;
  background-color: #fff;
}
.parent  > .myClass3 {
  float: right;
}

元の回答

元の回答は、OP が望んでいた構造に対応していませんでしたが、他の人が利益を得ることができるように、ここに残しました。

LESSコード

htmlタグ の下にまとめられた1 つのソリューション

html {
  &.cn .div {color: green;}
  &.jp .div {color: yellow;} 
}

クラスで編成された別のソリューション.div（なぜその名前のクラスが必要なのかわかりませんが、私はそれを採用しました）。

.div {
   html.cn & {color: green;}
   html.jp & {color: yellow;}
}

両方ともこの CSS を出力します

html.cn .div {
  color: green;
}
html.jp .div {
  color: yellow;
}
于 2012-11-23T20:40:33.297 に答える