Sass if 文の条件式で &&, || は使えない

Sass で使える比較演算子は ==, !=, <, <=, >, >=。論理演算子は and, or, not。つまり、Sass には &&, || という演算子は存在していない。

Sass の if 文で複数条件を設定したい時は and, or を使う

e.g.
リンクカラーを設定するような mixin で、文字色だけ渡され、:hover 時の色が渡されなかったら、:hover 字も文字色にするような場合

@mixin link-color($color: inherit, $hover-color: inherit) {
  $hover-color: if($color != inherit and $hover-color == inherit, $color, $hover-color);
  color: $color;
  &:hover {
    color: $hover-color;
    text-decoration: underline;
  }
}

&& のトラップ

誤って &&, || を使った場合、|| はシンタックスエラーになり間違い気づけるのですが、&& エラーにならず条件に関係なしに true の結果になってしまうようです。

e.g.

.foo {
  color: if(true && false, red, blue);
}
.bar {
  color: if(false && true, red, blue);
}
.baz {
  color: if(false && false, red, blue);
}

↓ コンパイル

.foo { color: red; }
.bar { color: red; }
.baz { color: red; }

誤って && を使ってしまうと発見が遅れてしまう可能性がありそうです。(どうしてこんな仕様に…

sample

See the Pen Test using `&&` in Sass by KIKIKI (@chaika-design) on CodePen.

Stylus と書き方が微妙に違って難しい…

---

[参考]

• Using multiple conditions (AND) in SASS IF statement - Stack Overflow
• Sass: Boolean Operators
• Sass: Structure of a Stylesheet
• SCSS 内での条件分岐処理 (@if-else, if関数) | まくまくSassノート

インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン