css - LESS CSS: ネスト時に & 演算子を悪用していますか?

Question

Less は、入れ子&の可能性を高めるために Operator を使用します。

.header        { color: black;
  .navigation  { font-size: 12px;
    &.class    { text-decoration: none }
  }
}

これにより、親セレクターでの置換が発生し&、実際のセレクターが親セレクターに連結されます。.header .navigation.class通常の追加の代わりに.class、子孫: になり.header .navigation .classます。

現在、可能なことは次のとおりです（こちらもご覧ください）：

.header        { color: black;
  .navigation  { font-size: 12px;
    #some-id & .foo   { text-decoration: none }
  }
}

その結果、次のようになります: #some-id .header .navigation .foo try here。置換が行われ、親セレクターの先頭にセレクター ( ) が追加されました。#some-id

この方法でコーディングすることは決してないという事実に加えて、これはおそらくあなたのスタイルシートをすぐに台無しにするので、私の質問:

この機能は文書化されていないため、これは機能ですか、それともバグである可能性が高いですか?
考えられる副作用はどれですか？

score 9 · Accepted Answer

また、あなたが参照したその質問で遭遇して以来、この使用についてさらに熟考してきました。これが「バグ」の使用であると明確に答えることはできませんが&(BoltClock はバグではないと適切に主張しているようです)、その価値について議論したいと思います (これは、論理的な理由からバグではないと主張します)。立場）。

ただし、論理的な引数の前に、別の短く単純な引用符(「入れ子になったルール」セクション) を見つけました。これは、少なくとも意図しないものではないことを示しているようです: 「&現在のセレクターの親を表します。」それでおしまい。BoltClock が主張するように、先頭に追加するか追加するかは関係ないようです。意図されていたのは、その時点までの「セレクターの親」のプレースホルダーであることだけでした。言語の「入れ子」の使用に関連して常に言及されているという事実は、それが存在するネストのポイントまでのネストの完全なセレクター文字列を指定するように設計されていることを意味します。その文字列を (事前または追加するために) どのように使用するかは、コーダー次第です。

さて、あなたは「このようにコーディングすることは決してないだろう」と述べています (そして以前にも言及しました) が、私はこれが非常に価値のある用途であると思われることに気づきました。次の議論を考えてみましょう。

イラストの HTML セットアップ

body説明のために、サイトの「外観」を変更する要素に 3 つの可能なクラス (「ライト」、「ミディアム」、「ダーク」テーマ) の動的設定があると仮定します。2 つの列があり、テーマごとに列ごとに異なるスタイル ( textLink、picLink、 )にしたいさまざまな種類のリンクがあります。textWithIconLink

<body class="light">
  <div class="leftCol">
     <a class="textLink"></a>
     <a class="picLink"></a>
     <a class="textWithIconLink"></a>
  </div>
  <div class="rightCol">
     <a class="textLink"></a>
     <a class="picLink"></a>
     <a class="textWithIconLink"></a>
  </div>
</body>

ここで質問するのは、リンクを見るだけで、次の2つの方法のうち...

LESS ではコードが少ない
LESS のコードの最高の組織
CSS で出力されるコードが少なくなります
出力された CSS を最適に整理します

「最高」はやや主観的かもしれません。その証拠を下から自分で検討させてください。

オプション #1 典型的なネスティング

LESS (約 99 行のコード)

/*Light Color Theme */
    .light {
      .leftCol {
        .textLink {
          color: fooL1;
          &:hover { color: barL1;}
        } 
        .picLink {
          background-image: url(/fooL1.jpg);
          &:hover { background-image: url(/barL1.jpg);}
        }
        .textWithIconLink {
          color: fooL2;
          background-image: url(/fooL2.jpg);
          &:hover { color: barL2; background-image: url(/barL2.jpg);}
        }   
      }
      .rightCol {
        .textLink {
          color: fooL3;
          &:hover { color: barL3;}
        } 
        .picLink {
          background-image: url(/fooL3.jpg);
          &:hover { background-image: url(/barL3.jpg);}
        }
        .textWithIconLink {
          color: fooL4;
          background-image: url(/fooL4.jpg);
          &:hover { color: barL4; background-image: url(/barL4.jpg);}
        }   
      }
    }
/*Medium Color Theme */
    .medium {
      .leftCol {
        .textLink {
          color: fooM1;
          &:hover { color: barM1;}
        } 
        .picLink {
          background-image: url(/fooM1.jpg);
          &:hover { background-image: url(/barM1.jpg);}
        }
        .textWithIconLink {
          color: fooM2;
          background-image: url(/fooM2.jpg);
          &:hover { color: barM2; background-image: url(/barM2.jpg);}
        }   
      }
      .rightCol {
        .textLink {
          color: fooM3;
          &:hover { color: barM3;}
        } 
        .picLink {
          background-image: url(/fooM3.jpg);
          &:hover { background-image: url(/barM3.jpg);}
        }
        .textWithIconLink {
          color: fooM4;
          background-image: url(/fooM4.jpg);
          &:hover { color: barM4; background-image: url(/barM4.jpg);}
        }   
      }
    }
/*Dark Color Theme */
    .dark {
      .leftCol {
        .textLink {
          color: fooD1;
          &:hover { color: barD1;}
        } 
        .picLink {
          background-image: url(/fooD1.jpg);
          &:hover { background-image: url(/barD1.jpg);}
        }
        .textWithIconLink {
          color: fooD2;
          background-image: url(/fooD2.jpg);
          &:hover { color: barD2; background-image: url(/barD2.jpg);}
        }   
      }
      .rightCol {
        .textLink {
          color: fooD3;
          &:hover { color: barD3;}
        } 
        .picLink {
          background-image: url(/fooD3.jpg);
          &:hover { background-image: url(/barD3.jpg);}
        }
        .textWithIconLink {
          color: fooD4;
          background-image: url(/fooD4.jpg);
          &:hover { color: barD4; background-image: url(/barD4.jpg);}
        }   
      }
    }

CSS 出力(約 87 行の出力、もちろんテーマ別に編成)

 /*Light Color Theme */
.light .leftCol .textLink { color:fooL1; }
.light .leftCol .textLink:hover { color:barL1; }
.light .leftCol .picLink { background-image:url(/fooL1.jpg); }
.light .leftCol .picLink:hover { background-image:url(/barL1.jpg); }
.light .leftCol .textWithIconLink {
  color:fooL2;
  background-image:url(/fooL2.jpg);
}
.light .leftCol .textWithIconLink:hover {
  color:barL2;
  background-image:url(/barL2.jpg);
}
.light .rightCol .textLink { color:fooL3; }
.light .rightCol .textLink:hover { color:barL3; }
.light .rightCol .picLink { background-image:url(/fooL3.jpg); }
.light .rightCol .picLink:hover { background-image:url(/barL3.jpg); }
.light .rightCol .textWithIconLink {
  color:fooL4;
  background-image:url(/fooL4.jpg);
}
.light .rightCol .textWithIconLink:hover {
  color:barL4;
  background-image:url(/barL4.jpg);
}
/*Medium Color Theme */
.medium .leftCol .textLink { color:fooM1; }
.medium .leftCol .textLink:hover { color:barM1; }
.medium .leftCol .picLink { background-image:url(/fooM1.jpg); }
.medium .leftCol .picLink:hover { background-image:url(/barM1.jpg); }
.medium .leftCol .textWithIconLink {
  color:fooM2;
  background-image:url(/fooM2.jpg);
}
.medium .leftCol .textWithIconLink:hover {
  color:barM2;
  background-image:url(/barM2.jpg);
}
.medium .rightCol .textLink { color:fooM3; }
.medium .rightCol .textLink:hover { color:barM3; }
.medium .rightCol .picLink { background-image:url(/fooM3.jpg); }
.medium .rightCol .picLink:hover { background-image:url(/barM3.jpg); }
.medium .rightCol .textWithIconLink {
  color:fooM4;
  background-image:url(/fooM4.jpg);
}
.medium .rightCol .textWithIconLink:hover {
  color:barM4;
  background-image:url(/barM4.jpg);
}
/*Dark Color Theme */
.dark .leftCol .textLink { color:fooD1; }
.dark .leftCol .textLink:hover { color:barD1; }
.dark .leftCol .picLink { background-image:url(/fooD1.jpg); }
.dark .leftCol .picLink:hover { background-image:url(/barD1.jpg); }
.dark .leftCol .textWithIconLink {
  color:fooD2;
  background-image:url(/fooD2.jpg);
}
.dark .leftCol .textWithIconLink:hover {
  color:barD2;
  background-image:url(/barD2.jpg);
}
.dark .rightCol .textLink { color:fooD3; }
.dark .rightCol .textLink:hover { color:barD3; }
.dark .rightCol .picLink { background-image:url(/fooD3.jpg); }
.dark .rightCol .picLink:hover { background-image:url(/barD3.jpg); }
.dark .rightCol .textWithIconLink {
  color:fooD4;
  background-image:url(/fooD4.jpg);
}
.dark .rightCol .textWithIconLink:hover {
  color:barD4;
  background-image:url(/barD4.jpg);
}

オプション #2 最終ターゲットのグループ化

これを「エンドターゲットグループ化」と名付けました。&これは、親セレクターを追加するこの別の方法でを実際に使用しているためです。1 つは、実際にスタイル設定されている最終的なエンドターゲット要素に基づいてコーディングしています。

LESS (約 88 行のコード)

/*Links */
/*Text  Links*/
.textLink {
  .light .leftCol &  {
      color: fooL1;
      &:hover { color: barL1;}
    }      
  .light .rightCol &  {
      color: fooL3;
      &:hover { color: barL3;}
    } 
  .medium .leftCol &  {
      color: fooM1;
      &:hover { color: barM1;}
    } 
  .medium .rightCol &  {
      color: fooM3;
      &:hover { color: barM3;}
    } 
  .dark .leftCol &  {
      color: fooD1;
      &:hover { color: barD1;}
    } 
  .dark .rightCol &  {
      color: fooD3;
      &:hover { color: barD3;}
    } 
}
/*Picture Links */
.picLink {
  .light .leftCol &  {
      background-image: url(/fooL1.jpg);
      &:hover { background-image: url(/barL1.jpg);}
    } 
  .light .rightCol &  {
      background-image: url(/fooL3.jpg);
      &:hover { background-image: url(/barL3.jpg);}
    } 
  .medium .leftCol &  {
      background-image: url(/fooM1.jpg);
      &:hover { background-image: url(/barM1.jpg);}
    } 
  .medium .rightCol &  {
      background-image: url(/fooM3.jpg);
      &:hover { background-image: url(/barM3.jpg);}
    } 
  .dark .leftCol &  {
      background-image: url(/fooD1.jpg);
      &:hover { background-image: url(/barD1.jpg);}
    } 
  .dark .rightCol &  {
      background-image: url(/fooD3.jpg);
      &:hover { background-image: url(/barD3.jpg);}
    } 
}
/*Text with Icon Links */
.textWithIconLink {
  .light .leftCol &  {
      color: fooL2;
      background-image: url(/fooL1.jpg);
      &:hover { color: barL2; background-image: url(/barL1.jpg);}
    } 
  .light .rightCol &  {
      color: fooL4;
      background-image: url(/fooL3.jpg);
      &:hover { color: barL4;  background-image: url(/barL3.jpg);}
    } 
  .medium .leftCol &  {
      color: fooM2;
      background-image: url(/fooM1.jpg);
      &:hover { color: barM2; background-image: url(/barM1.jpg);}
    } 
  .medium .rightCol &  {
     color: fooM4;
      background-image: url(/fooM3.jpg);
      &:hover { color: barM4; background-image: url(/barM3.jpg);}
    } 
  .dark .leftCol &  {
     color: fooD2;
      background-image: url(/fooD1.jpg);
      &:hover { color: barD2; background-image: url(/barD1.jpg);}
    } 
  .dark .rightCol &  {
      color: fooD4;
      background-image: url(/fooD3.jpg);
      &:hover { color: barD4; background-image: url(/barD3.jpg);}
    } 
}

CSS (約 88 行の出力 [1 つの余分なコメントのため]、最終ターゲット要素ごとに整理されています。ただし、クラス構造のため、テーマごとのサブ組織がまだあることに注意してください)

/*Links*/
/*Text  Links*/
.light .leftCol .textLink { color:fooL1; }
.light .leftCol .textLink:hover { color:barL1; }
.light .rightCol .textLink { color:fooL3; }
.light .rightCol .textLink:hover { color:barL3; }
.medium .leftCol .textLink { color:fooM1; }
.medium .leftCol .textLink:hover { color:barM1; }
.medium .rightCol .textLink { color:fooM3; }
.medium .rightCol .textLink:hover { color:barM3; }
.dark .leftCol .textLink { color:fooD1; }
.dark .leftCol .textLink:hover { color:barD1; }
.dark .rightCol .textLink { color:fooD3; }
.dark .rightCol .textLink:hover { color:barD3; }
/*Picture Links */
.light .leftCol .picLink { background-image:url(/fooL1.jpg); }
.light .leftCol .picLink:hover { background-image:url(/barL1.jpg); }
.light .rightCol .picLink { background-image:url(/fooL3.jpg); }
.light .rightCol .picLink:hover { background-image:url(/barL3.jpg); }
.medium .leftCol .picLink { background-image:url(/fooM1.jpg); }
.medium .leftCol .picLink:hover { background-image:url(/barM1.jpg); }
.medium .rightCol .picLink { background-image:url(/fooM3.jpg); }
.medium .rightCol .picLink:hover { background-image:url(/barM3.jpg); }
.dark .leftCol .picLink { background-image:url(/fooD1.jpg); }
.dark .leftCol .picLink:hover { background-image:url(/barD1.jpg); }
.dark .rightCol .picLink { background-image:url(/fooD3.jpg); }
.dark .rightCol .picLink:hover { background-image:url(/barD3.jpg); }
/*Text with Icon Links */
.light .leftCol .textWithIconLink {
  color:fooL2;
  background-image:url(/fooL1.jpg);
}
.light .leftCol .textWithIconLink:hover {
  color:barL2;
  background-image:url(/barL1.jpg);
}
.light .rightCol .textWithIconLink {
  color:fooL4;
  background-image:url(/fooL3.jpg);
}
.light .rightCol .textWithIconLink:hover {
  color:barL4;
  background-image:url(/barL3.jpg);
}
.medium .leftCol .textWithIconLink {
  color:fooM2;
  background-image:url(/fooM1.jpg);
}
.medium .leftCol .textWithIconLink:hover {
  color:barM2;
  background-image:url(/barM1.jpg);
}
.medium .rightCol .textWithIconLink {
  color:fooM4;
  background-image:url(/fooM3.jpg);
}
.medium .rightCol .textWithIconLink:hover {
  color:barM4;
  background-image:url(/barM3.jpg);
}
.dark .leftCol .textWithIconLink {
  color:fooD2;
  background-image:url(/fooD1.jpg);
}
.dark .leftCol .textWithIconLink:hover {
  color:barD2;
  background-image:url(/barD1.jpg);
}
.dark .rightCol .textWithIconLink {
  color:fooD4;
  background-image:url(/fooD3.jpg);
}
.dark .rightCol .textWithIconLink:hover {
  color:barD4;
  background-image:url(/barD3.jpg);
}

おわりに

その他の考慮事項:

まず、ほとんどのテーマの色 (およびおそらく他のテーマの側面) は変数で設定されます。変数は、上記のオプション #2 を使用してもテーマごとに LESS コードの上部にグループ化できます。つまり、出力のテーマ構造を持ちます。コード内に散らばるCSS自体が必ずしも悪いわけではありません。

次に、要素のタイプの「標準」コードは、テーマコードの上に定義されます。私の例はこれを示していませんでしたが、すべての.textLink要素がtext-decoration: none;設定されたと言っています。これは、オプション #2 の下で、それ以上のセレクターコードなしで 1 回発生し、以下のすべてのテーマの変更の上に表示されます。オプション #1 では、新しいネスト .textLinkされていないセレクター (少なくとも 1 行のコード) を設定して、それをすべてのテーマリンクに適用する必要があります。クラスの「基本」コードは、ここでも、場所とは無関係の場所になります。テーマリンク情報の残りのコードは次のとおりです。

第 3 に、開発者として、自分のpicLinks(ページ上の特定のタイプの要素) に問題がある場合、オプション #2 を使用すると、問題のある要素のコードを簡単に調べることができます。テーマは 1 か所にあります。

明らかに、最終的な LESS と CSS をどのように構成するかが、この価値をどのように見るかの主要な要因になるでしょう。&ここでの私のポイントは、参照に親レベルセレクターを追加するこの方法でを使用する非常に便利で論理的な理由があることを単に示すことです&。

score 6 · Accepted Answer

&コンビネータの悪用ではありません。ネストされたセレクターのどこにでも配置でき、その上にあるもの (いわゆる親セレクター) に置き換えられます。

[&コンビネーターは] ネストされたセレクターを子孫としてではなく、その親セレクターに連結する場合に使用されます。

「連結」と表示されていることに注意してください。親セレクターをネストされたセレクターの前または後にのみ追加できるとは言いません。連結は、特定の方向にのみ機能しません。

さらに、「子孫」という言葉は、ネストされたセレクターがデフォルトで子孫コンビネーターによってリンクされているかのように扱われるという性質に関係しています。本質的&に子孫のみの使用を制限するものではありません。また、ネストされたセレクターが追加されるだけで、先頭に追加されたり、さらには親セレクターが親要素または祖先要素を表す必要があることを意味するものでもありません。その真ん中に挿入。

css - LESS CSS: ネスト時に & 演算子を悪用していますか?

2 に答える 2

イラストの HTML セットアップ

オプション #1 典型的なネスティング

オプション #2 最終ターゲットのグループ化

おわりに

Related

Reference