稀に発生する Sass / SCSS で web サイトを作る案件。 毎回メディアクエリを生成する mixin どう書いてたっけ？ってなるのでコピペできるメモ Motivation breakpoint を変数で持たせて mixin でそれぞれのメディクエリを生成できるようにする media query を…

タイトルのままです。 CSS 変数はメディアクエリ (@media) のブレイクポイントの値には使うことができないようです。 CSS 変数をブレイクポイントにしても動作しない :root { --breakpoint-md: 48em; } @media (min-width: var(--breakpoint-md)) { body { c…

Sass (SCSS) を使って CSS のカスタムプロパティ (変数) を定義するときのメモ Sass の変数を #{} で囲ってあげればOK $textColor: #000; $backgroundColor: #FFF; // カスタムプロパティを定義 :root { --text-color: #{$textColor}; --background-color: #…

ダークモード…やってこなかったので今更の入門したのでメモ。 prefers-color-scheme を使う prefers-color-scheme をメディアクエリの中で使用することでデバイスのダークモード/ライトモードの設定を識別できます。 light ... ユーザーがシステムに、明色の…

Tailwind の md:flex みたいなレスポンシブのクラスみないな prefix のあるクラスと楽に作れる mixin を作りたかった 環境 sass: 1.42.1 (Dart Sass) レスポンシブ用の prefix を付けたクラスを生成する _breakpoints.scss $breakpoints: ( xzs: 0, xs: 23.3…

npm script で SCSS をコンパイルしてたのだけれど、環境変数や変数展開などを多用していたら Windows 環境でエラーになりビルド出来ない問題続出してメンテコストが高くなってしまいそうだったので、ざっくり webpack で CSS だけビルドする設定を作成下の…

新規のプロジェクトとか受託案件とかの初期段階でない限りプロジェクトで使うカラーバリエーションをまるっと作る機会ってなさそうだけど機械的にカラーバリエーションを作れる方法ができたから記録として。 カラーバリエーションを生成する // デフォルトの…

LP作って〜って言われたので、ほな Svelte でやってみよっかな〜と思い Svelte に入門しました。 Svelte はデフォルトでは CSS in JS でスコープのあるスタイルが書けるのですが、共通して使いまわしているコンポーネントのスタイルを親コンポーネントで指定…

フロントエンド開発をしていて Sass の導入に sass になっているものと node-sass になっているものがあってどっち？ってなったのでメモ node-sass は非推奨になっていた Warning: LibSass and Node Sass are deprecated. While they will continue to recei…

CSS Modules とゎ？ ざっくりいうと CSS は全部が global 定義なので、コンポーネントごとにクラス名をハッシュ化したモジュールにしてしまってスタイルの影響範囲をコンポーネントの中に閉じ込めようというもの e.g. /* style.css */ .logo { color: red; }…

CSS を webpack で扱う時にセットで使いがちな css-loader と style-loader の違いをちゃんと理解してなかったので CSS Modules について考えるに当たって調べ直したのでメモ webpack の loader の処理順 e.g. SCSS を webpack で扱う際の設定 // webpack.co…

SCSS のブレイクポイントの変数を React で使いたかったけど読み込ませるのにハマったのでメモ。 要件 SCSS は styled コンポーネントではなく、別途CSSにコンパイルしている SCSS の一部の変数を TypeScript な React で読み込んで使いたい SCSS の変数を J…

変数に !default フラグを付けて定義すると、変数が定義されてないか値が null の場合のみ値が設定されるようになる g.e. !default フラグなし $base-color: #333; $base-color: #000; // 後から出てきたもので上書きされる body { color: $base-color; // =…

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

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

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

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

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

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