7

ここで LESS に取り掛かりますが、まだ不明な点が 1 つあります。

body タグのクラスによって制御される、Web サイト用の複数のカラー テーマがあるとします。これから、各テーマ内の各要素のさまざまな色を再定義できます。変更する要素がたくさんあり、テーマがたくさんある場合は、簡単ですが、かなり時間がかかります。新しいテーマを追加するたびに、すべてのセレクターを異なる色の値で書き直す必要があります。

これまでの作業は、見つけた別の投稿に基づいています: クラスに応じた LESS.css 変数

...しかし、色変数を使用して同じCSSをドロップする前に、すべてのセレクターを書き出してミックスインを含める必要があるという点で、私がやりたいことはまだ複雑すぎるようです。

私はCODEPEN HEREを作成しました

誰かが少し見て、これに別の方法でアプローチする方法や、このプロセスを合理化する方法をアドバイスしてくれる時間をいただければ幸いです.

助けてくれた人に感謝します:)

4

1 に答える 1

19

1 つのスタイル シート内でテーマを維持したいと仮定し (コメントに記載されている cimmanon のように複数のシートではなく)、LESS 1.3.2+ を使用していると仮定すると、次のコードは次のように設定して重複の量を減らします。テーマの変更が必要なクラスをループします。

これは Codepen では機能しないことに注意してください (おそらく、以前のバージョンの LESS を実行しているため、エラーがスローされます)。ただし、コードをLESS のコンパイラーuncaught throw #に入れると、正しくコンパイルされていることがわかります。

LESS (デモ用にテーマを追加した Codepen コードに基づく)

//////////////////////////////////////////////////////
// CONSTANTS

@lightColour: #fff;
@darkColour: #000;
@lightBg: #fff;
@darkBg: #000;
@numberOfThemes: 3; //controls theme loop

//////////////////////////////////////////////////////
// MIXINS

//Theme Definitions by parametric mixin numbers (1), (2), etc.
.themeDefs(1) {
  @lightColour: #f00;
  @darkColour: #fff;
  @lightBg: #f00;
  @darkBg: #fff;
}

.themeDefs(2) {
  //inverse of 1
  @lightColour: #fff;
  @darkColour: #f00;
  @lightBg: #fff;
  @darkBg: #f00;
}

.themeDefs(3) {
  @lightColour: #cfc;
  @darkColour: #363;
  @lightBg: #cfc;
  @darkBg: #363;
}


.curvy {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

//////////////////////////////////////////////////////
// GENERAL STYLING

* {padding: 0;margin: 0;}
html {text-align: center;}
h2 {padding: 20px 0;}

.box {
  .curvy;
  color: @lightColour;
  background: @darkBg;
  display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%;
}

//////////////////////////////////////////////////////
// THEME BUILDING

.buildThemes(@index) when (@index < @numberOfThemes + 1) {

  .theme-@{index} {
      .themeDefs(@index); 
      color: @lightColour;
      background: @darkBg; 

      .box {
        color: @darkColour;
        background: @lightBg;
      }
    }
    .buildThemes(@index + 1);
}
//stop loop
.buildThemes(@index) {}
//start theme building loop
.buildThemes(1);

CSS 出力 (簡潔にするためにループテーマの CSS のみを表示)

.theme-1 {
  color: #ff0000;
  background: #ffffff;
}
.theme-1 .box {
  color: #ffffff;
  background: #ff0000;
}
.theme-2 {
  color: #ffffff;
  background: #ff0000;
}
.theme-2 .box {
  color: #ff0000;
  background: #ffffff;
}
.theme-3 {
  color: #ccffcc;
  background: #336633;
}
.theme-3 .box {
  color: #336633;
  background: #ccffcc;
}
于 2013-03-07T19:25:58.963 に答える