web-dev-qa-db-ja.com

SASS IFステートメントで複数の条件（AND）を使用する

SASSを使用して、IFステートメントに複数の条件があります

私が今使っているもの：

@function color-x ($alpha) {
    @if      $accent == red   {@return red($alpha)} 
    @else if $accent == green {@return green($alpha)} 
    @else if $accent == blue  {@return blue($alpha)}
}

私の素朴な（失敗した）複数の条件を使用しようとしました：

@function color-x ($alpha) {
    @if      $accent == red   && theme == light {@return red($alpha)} 
    @else if $accent == green && theme == light {@return green($alpha)} 
    @else if $accent == blue  && theme == light {@return blue($alpha)}
}

複数の条件を持つことは可能ですか？

if-statementsass
54
500

Sass言語のリファレンスドキュメントから：

ブール演算

SassScriptは、ブール値のand、or、およびnot演算子をサポートしています。

（リンク）

したがって、複合条件を持つifステートメント式は次のようになります。

@if $var1 == value1 and $var2 == value2 {
    // ...
}

さらに、括弧を使用して、より複雑な式の操作の順序に影響を与えることができます。

@if ($var1 == value1 and not ($var2 == value2)) or ($var3 == value3) {
    // ...
}
112
Russ Ferri

次のこともできます。

@if index("foo" "bar", $value) { .. }

ただし注意してください：

  1. 何をしようとしているのか、はっきりしないかもしれません。
  2. ブール値ではなく、数値またはnullを返します。
3
Hugo Giraudel