1

sass 変数にスコープを追加する方法はありますか?

要素にクラスをアタッチできるようにしたいbody。このクラスは、残りのスタイルシートがアクセスできる一連の色を参照します。

私が試してみました：

@mixin theme_one{
    $color: #000;
}
.theme_one{
  @include theme_one;
}

と

.theme_one{

  $color: #000;
}
4

3 に答える 3

3

私はちょうど同じ問題に遭遇しました。サイトのセクションごとに異なるカラー テーマを使用したいと考えていました。

ミックスインを使用するのが最善の方法のようです。DRYで使いやすいです。トリックは、メインのスタイル ブロックで色を設定するのではなく、ミックスインのみを使用することです。

うまく編集できるように、テーマの色を上部に変数として設定し、多数の変数を定義せずに複数の値を渡すことができるように、それらをリストとして設定しました。

そう：

// Variable Definitions

$defaultColor: black white grey;
$color2:       blue green brown;
$color3:       red white blue;

@mixin colorSet($color: $defaultColor) {
  $link:       nth($color, 1);
  $border:     nth($color, 2);
  $background: nth($color, 3);

  border-color: $border;
  background-color: $background;

  .column {
    border-color: lighten($border, 10%);
  }

  a {
    color: $link;
    &:hover {
      color: darken($link, 15%);
    }
  }

}

// Default colours
body {
  @include colorSet();
}

// Scoped colours
.my-theme-3 {
  @include colorSet($color3);
}

.my-theme-2 {
  @include colorSet($color2);
}

次のようなものが生成されます。

body {
  border-color: white;
  background-color: grey; }
  body .column {
    border-color: white; }
  body a {
    color: black; }
    body a:hover {
      color: black; }

.my-theme-3 {
  border-color: white;
  background-color: blue; }
  .my-theme-3 .column {
    border-color: white; }
  .my-theme-3 a {
    color: red; }
    .my-theme-3 a:hover {
      color: #b30000; }

.my-theme-2 {
  border-color: green;
  background-color: brown; }
  .my-theme-2 .column {
    border-color: #00b300; }
  .my-theme-2 a {
    color: blue; }
    .my-theme-2 a:hover {
      color: #0000b3; }

編集: デフォルトの mixin 値を使用するように更新されました。

于 2013-02-04T11:43:16.463 に答える
0

あなたの場合、ミックスインを使用する必要はありません。多くのスタイルのセットがある場合は、ミックスインを使用してください。あなたが持っている場合

@mixin theme_one{
    $color: #000;
    height: 50px;
}

次に、Mixinを使用します

それ以外の場合、単一のプロパティの場合は変数のみを使用します

$color: #fff;


.some_class01{

  color: $color;
  background: $color;
}

.some_class22{
  border-color: $color;
}

IMP：変数はコードの先頭に割り当てる必要があります。つまり、割り当てた場所の前後で使用しないでください:)

于 2012-08-21T11:26:07.697 に答える
0

これがあなたが探しているものかどうかわかりません。おそらくうまくいくはずです。(!default を使用するだけの問題かもしれません)

クラスを含むボディタグ..

<body class="theme_one">

</body>

スタイルシートで定義された Sass 変数..

//THEME ONE VARIABLES
.theme_one{
    $borderColor:#333 !default;
    $fontColor:#999 !default;
}

//THEME TWO VARIABLES
.theme_two{
    $borderColor:#CCC !default;
    $fontColor:#000 !default;
}

body タグで使用されているクラスに応じて上書きされる既存の CSS。

h1.someheader {
    color:$fontColor;
    border-bottom:1px solid;
    border-color:$borderColor;
}

それ以外の場合は、このようなことを試すことができます。同様のことを試したようですが、ミックスインにエラーがあるようです...以下のメモを参照してください。

//mixin used to set variables for properties
@mixin themeOne($fontColor,$borderColor) {
    color:$fontColor;
    border-color:$borderColor;
}

@include themeOne(#000,#CCC);

既存の CSS

h1.someheader {
    color:$fontColor
    border-color:$borderColor;
    border-bottom:1px solid;
}

また、使用しているミックスインの例にも注意してください$color:#000;...これは color:#000; である必要があるため、適切に解釈されません。次のようなことをしない限り、変数をセレクターとして使用することはできません#{$color}:#000;

まだ十分にテストしていないので、いくつか調整が必要かもしれません。これで問題が解決しない場合は、少なくともいくつかのアイデアが得られることを願っています。

于 2012-08-23T17:01:02.147 に答える