Sass
個人の有用 sass 記法についてまとめている(初心者)
吉本式 BEM 設計(BEM 設計ベース)(導入時)
Overview
Sass(Syntactically Awesome Stylesheets)
は、CSS(Cascading Style Sheets)をより効率的かつ管理しやすくするためのプリプロセッサ言語。
Sassを使うことで、通常のCSSにはない機能を利用でき、スタイルシートを簡潔にし、再利用性を高め保守性を向上させることができます。
Sassの実行環境
実行環境は3つある
Ruby Sass
一番最初に作られたRubyベースののSassの実行環境。
2019年3月に公式のサポートは終了していますが、1年くらい前に「使用率約10%」というアンケート結果を見かけたことがあるので、まだ使用している現場もそれなりにあるかもしれない。
LibSass
まだまだ多くの現場で現役で使われているであろう C/C++
ベースの実行環境。
Node環境でよく使われている node-sass
はLibSassをベースに作られているので、LibSassだと意識せずに使っている人もいるかもしれません。
LibSass非推奨問題
もともと @importが段階的に廃止となるという話もあり、公式としてはLibSassではなく Dart Sass
を使うことを推奨している、ということは数年前から言われていました。そういった中で、2020年10月に唐突にLibSassが非推奨となりました。
Dart Sass
Dart
言語で書かれた最新の実行環境。現在の公式推奨環境で、今後廃止予定の @import
の代替となる @use
や @forwordが唯一使える環境です。
-
version確認
$ sass -v
-
コメント、文字コ ード Sassでは
css /* */
が使えるがJSなどで使用するjs //
のような1行コメントも使用ができる ※CSSのコメントはコンパイルされても削除され図に残る。 -
文字コードの指定 コメントなどに日本語を含める場合、ファイルの先頭で@charsetを使用して
UTF-8
を設定する必要がある。
親セレクターの参照 (&)
セレクターに&を使うとネストしている親セレクターを参照できる。
変数 (Variables: $)
Sassの変数では以下のような決まりがある。
変数の宣言は $
から初める必要がある。
半角数字から始まる名前や連続したハイフンから始まる名前はエラーになる。
使用方法として
基本のフォントカラーやリンクカラー、ベースフォントなどをあらかじめ指定しておくと便利