0

2 つのサブサイトを持つ SASS ベースのサイトがあります。どちらもまったく同じ HTML と CSS レイアウトを使用していますが、いくつかの単純なブランドの背景色が変更されています。

私のSCSSファイルには、次のものがたくさんあります。

body.subsite-one {
  #sidebar-second #wrapper p {
    background-color: $primary-color-one;
  }
} 

body.subsite-two {
  #sidebar-second #wrapper p {
    background-color: $primary-color-two;
  }
} 

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      /* etc... */
    }

  }

}

入れ子の残りの部分の外側でカスタム色を宣言すると、すぐに扱いにくくなり、面倒になりますが、次のようなことをしたいと思います。

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      background-color: $primary-color-($subsite);
    }

  }

}

したがって、私の質問: 上記の $subsite のように、親クラス/ID チェーンによって変更される変数を設定できる方法はありますか?

(注: サブサイト クラスは本文にしか設定できません。他のタグでは使用できません。)

4

3 に答える 3

6

最も簡単な解決策は、親セレクターを使用することです。

#sidebar-second {
  padding: 10px;
  #wrapper  {
    border: 1px solid #000;
    p {
      font-size: 17px;
      .subsite-one & { background-color: $primary-color-1; }
      .subsite-two & { background-color: $primary-color-2; }
    }
  }
}

サブサイトのリストが長い場合は、それを自動化できます。

$subsites      : one  two     three   four   five;
$primary-colors: red  orange  yellow  green  blue;

#sidebar-second {
  padding: 10px;
  #wrapper  {
    border: 1px solid #000;
    p {
      font-size: 17px;
      @each $site in $subsites {
        $index: index($subsites,$site);
        .subsite-#{$site} & { background-color: nth($primary-colors,$index); }
      }
    }
  }
}
于 2012-11-10T20:27:59.257 に答える
2

これが機能するかどうかはわかりませんが、試してみることを検討してください。

まず、共通のルールを持つ「_common.scss」を用意します。

#sidebar-second {
    padding: 10px;

  #wrapper  {
    border: 1px solid #000;

    p {
      font-size: 17px;
      background-color: $primary-color;
    }

  }

}

次に、サブサイト1のSCSSファイルを作成し、その共通ファイルをインポートしますが、最初に$primary-color変数を設定します。

$primary-color: red;
@import "common";

// rules specific to sub-site 1 go here

サブサイト2についても同じようにします。

$primary-color: blue;
@import "common";

// rules specific to sub-site 2 go here

私は自分のサイトで同様のことをしています。ここでそのソースコードをチェックしてください：
https ：//github.com/simevidas/ecmazing-site/tree/master/sass

于 2012-11-09T16:59:37.583 に答える
-1

エリックの答えの次のバリエーションが（また）機能するはずだと私は思いました：

$subsites: subsite-one subsite-two;

#sidebar-second {
  .case-study-aside-block  {
    .views-field-title .field-content span {
      @each $var in $subsites {
        background-color: $primary-color+$var;
      }
    }
  }
}

ただし、 Drupalを搭載したSASSコンパイラにバグがある可能性があるため、現時点ではこれを簡単にテストすることはできません。

（または、変数を連結できない場合は、彼が提案したように2番目のリストをステップスルーできます。）

于 2012-11-14T11:22:00.060 に答える