かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

Sass (SCSS)

scss-lint に QualifyingElement といわれた。

こんな感じで怒られた。 QualifyingElement: Avoid qualifying attribute selectors with an element. 「属性セレクタで要素を修飾しないで」ということらしい。 input[type="radio"]:checked, input[type="checkbox"]:checked { + label { color: $highligh…

sass-lint と scss-lint で lint から除外する場合の書き方が微妙に違ってた

理由があって lint を無視させたい時の書き方が sass-lint と scss-lint で微妙に違う。 sass-lint だと思ってたらプロダクトで使ってるのが scss-lint で ignore できてたなかったので自戒を込めてメモ。 ブロック内だけ lint を無視させる sass-lint sass-…

Sass if文 ( @ifディレクティブ ) の中で変数を使う時の罠

Sass で if文中で変数を使う時にスコープのトラップがあったのでメモ。 if文 ( @ifディレクティブ ) の中で作成された変数は、if文外でアクセスできない 次のような書き方だと変数が存在しないというコンパイルエラーになります。 .foo { @if $is-error { $c…

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

Sass で使える比較演算子は ==, !=, <, <=, >, >=。論理演算子は and, or, not。つまり、Sass には &&, || という演算子は存在していない。 Sass の if 文で複数条件を設定したい時は and, or を使う e.g. リンクカラーを設定するような mixin で、文字色だ…

Sass (SCSS) BEMで書く時に @at-root は必要か?

CSS を Sass (SCSS) + BEM ( Block-Element-Modifier ) で書いているプロジェクトに参加してて、BEMに合うようにするために @at-root を使ってくださいと言われ、 @at-root というものを知らなかったので調べたメモ。 結論としては現在では Sass で BEM な C…

Sass (SCSS) 書き方のメモ

5年ぶりくらいにSass (SCSS) を触る機会があってすっかり忘れてて手間取ってしまったので、基本的な事を思い出す意味も込めてメモ。 Sass Sassには{}の不要なSASS記法と、{}が必要でCSSに近いSCSS記法の2つがある。 このエントリーは SCSS にについて。 { } …