41

Sass で、特定の要素が既に継承している値を操作することは可能ですか?

私はこのようなものを目指しています：

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)
4

4 に答える 4

26

継承

いいえ、Sass はどのセレクターから色を継承するかを「認識」していません。strongが の子孫であることを知る必要がありbodyます。体の外では許可されていないので、それはあなたと私にとって十分に合理的な仮定のように思えますが、そのような仮定strongはほとんどのセレクターについて行うことはできません. Sass は、他の祖先要素からカスケードが発生していないことも認識している必要があります。

ul {
    color: red;
}

ol {
    color: blue;
}

li {
    // which color do I inherit from ????
}

コピー元のセレクターを指定できますか?

Sass は、以前に宣言された変数の値へのアクセスをいかなる方法でも許可しません。「ボディカラーより濃いめ」の指定はできません。CSS ルールはオブジェクトまたはマッピングではなく、どのような方法でもアクセスできません。あなたのケースは単純かもしれませんが、次のようなより複雑なケースを考えてみましょう:

.foo {
    background: mix(white, blue); // fallback for non-rgba browsers
    background: rgba(blue, .5);

    .baz & {
        background: yellow;
    }

    @media (min-width 30em) {
        background: orange;
    }

    @supports (flex-wrap: wrap) {
        background: red;
    }
}

.bar {
    // access which background color from .foo ????
}

さて、私は何ができますか？

必要なことを行うには、変数を使用するか、バニラ CSS の機能である必要があります。

昔ながらの CSS

一部のプロパティは、ブラウザーで長年サポートされているものを使用して動的に生成/継承されているように見せることができます。

ul.one {
  background: white;
}

ul.two {
  background: yellow;
}

ul {
  background: rgba(0, 120, 255, .2);
  padding: 1em;
}
<ul class="one">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>

<ul class="two">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>

CSS 変数

CSS 変数の生成は、継承されたプロパティを操作できるようになるのとほぼ同じです。ブラウザーのサポートはまだ完全ではありませんが ( caniuseを確認してください)、次のようになります。

サス:

ul {
  --list-color: orange;
  --darker-color: darken(orange, 15%);
  color: var(--list-color);
}

ol {
  --list-color: green;
  --darker-color: darken(green, 10%);
  color: var(--list-color);
}

li {
  background: var(--darker-color);
}

出力：

ul {
  --list-color: orange;
  --darker-color: #b37400;
  color: var(--list-color);
}

ol {
  --list-color: green;
  --darker-color: #004d00;
  color: var(--list-color);
}

li {
  background: var(--darker-color);
}
<ul>
  <li>Foo</li>
</ul>

<ol>
  <li>Bar</li>
</ol>

CSS 変数をサポートするブラウザーを使用している場合、結果は次のようになります。

ここに画像の説明を入力

于 2013-02-17T12:59:55.323 に答える
9

同じものを探していて、こちらにたどり着きました。あなたの質問には答えましたが、問題は解決しませんでした。

解決策は次のとおりです。http://codepen.io/monsto/pen/tiokl

HTML が次の場合:

    <div class="main">
      <header class="header">
        <div class="warning">
          <p><strong>Danger,</strong> Will Robinson!</p>
        </div>
      </header>
    </div>

次に、SASSを使用してこれを行うことができます：

$bg: #f88;

@mixin colorize {
  $bg: darken($bg,15%) !global; // !global flag required for 3.4 or later, remove if using 3.3 or older
  background: $bg;
}

.warning {
  background: $bg;
  p {
    @include colorize;
    strong {
      @include colorize;
    }
  }
}

SASS は、その出力の結果を認識していないようです。したがって、それにinheritは何の意味もありません。基本的に、出力する前に出力が何であるかを知るように求めています。

ただし、デフォルトでは厳密にスコープが設定されているため、変数であることは認識しています。ドキュメントから：

変数は、変数が定義されているネストされたセレクターのレベル内でのみ使用できます。ネストされたセレクターの外側で定義されている場合は、どこでも使用できます。

ミックスイン内の AND THEN 変数:

mixin に渡されたコンテンツのブロックは、mixin のスコープではなく、ブロックが定義されているスコープで評価されます。

これにより、上記の mixin は、親レベルで定義された既知の変数を取得し、現在のレベルでそれを再定義して、その子で使用できるようになります。$x = $x + 1マルチネストされたループ内で行うようなものです

TBPH、これは SASS に対する私の考え方をかなり変えます。私が思っていたよりも明らかにプログラマティックです。

于 2013-09-12T19:05:51.620 に答える
1

この回答は、具体的には機能に対応しています。考えられる代替手段は、SASS (または LESS)関数の代わりにdarkenCSS フィルターを使用することです。フィルターが他の要素に影響を与えないように、基本的にタグ内で色をラップする必要があります。brightness()darken()span

簡単なデモ:

.red {color: red}
.blue {color: blue}
.green {color: green}

span {
  display: inline-block;
  padding: 1em;
}

.darken span {
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
}
<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>

<div class="darken">
  <span class="red">Red</span>
  <span class="blue">Blue</span>
  <span class="green">Green</span>
</div>

jsFiddle: https://jsfiddle.net/azizn/hhorhz9s/

ブラウザの互換性に注意する必要があります。IE Edge、最新の Firefox、および Chrome で動作するはずです。詳細については、 caniuseまたはMDNを参照してください。

背景を暗くする場合は、不透明度のある疑似セレクターを使用するか、半透明の黒い PNG 背景画像を追加できます。

于 2016-04-10T03:04:11.983 に答える