🍣

【Sass】Sass（サス）の使い方入門

2023/06/26に公開

CSS

Sass

Scss

tech

Sass（サス）とは？

「Sass（サス）」とは、CSSを拡張して扱いやすくしたスタイルシートのことです。

Syntactically Awesome StyleSheet の略で、直訳すると「文法的に素晴らしいスタイルシート」です。

SassはCSSのメタ言語です

メタ言語とは、ある言語に別のルールを定義するために使われる言語のことで、拡張言語と呼ばれることもあります。

SassはCSSのメタ言語で、効率的にCSSを記述するための言語であり、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。

Sassを導入するメリットとは？

Sassを導入するメリットは、主に、以下の5つです。

入れ子の使用が可能
変数を利用できる
四則演算が可能
関数を使用できる
ミックスイン・継承による効率化

Sassの種類について

Sassには「SASS」「SCSS」という2種類の書き方があります。

SASS記法について

SASS記法の大きな特徴は、セミコロンや波括弧を使用しないことです。そのため、コードが簡略化され、書く際の負担が少ないというメリットがあります。

SASS記法で書かれたSassファイルの拡張子は「.sass」です。

SCSS記法について

SCSS記法の特徴は、書き方がCSSに似ていることです。CSSのようにネストを使用するため、CSSに触れたことのある人なら直感的に書くことができます。そのため、SCSSのほうが一般的に普及しています。

ファイルの拡張子は「.scss」になります。

Browserslistとは

Autoprefixer, Babel, ESLint, PostCSSなどでターゲットブラウザを設定するときに、package.jsonや.browserslistrcファイルなどにターゲットブラウザの条件を追加して取得する仕組みのことです。

重要な設定ですがBrowserslistの書き方をよく理解しておらず、好ましくない設定になっているケースが多いので、設定する際は注意が必要です。

ブラウザのバージョンアップデートについて

Browserslistに「last 2 versions」とだけ書かれていることが結構あります。

しかし、最近のブラウザはバージョンアップデートの感覚が短くなっているので3バージョン前になっている可能性も十分にあります。

それを考えると、バージョンの設定には「last 3 versions」の方が現時点では良さそうです。

Browserslistの「Check compatible browsers」で格ブラウザの対応バージョンを確認しましょう。
https://browsersl.ist/

not deadも実質必要

last 3 versionsだけ書くとサポートが終了したブラウザも対象にしてしまうため、IE11、IE10、IE9も対象となってしまいます。

そのため、サポートが終了したブラウザを除外する「not dead」も特別な事情がない限りは記載が必須となります。

Safari (iOS)の指定も大切

Safariはlast 3 versionsと書くだけでは例えばWebサイトの推奨環境のバージョンがSafari 14以上、Safari on iOS 12以上とかの場合はターゲットに含まれません。

SafariやSafari on iOSの推奨が3バージョンまでというWebサイトは少ないです。

そのため、別途「iOS >= 12, Safari >= 14」のような追記が必要になります。

Androidの指定はバージョン5以上は意味がない

WebサイトによってはAndroidの推奨バージョンを5や6にしている場合はBrowserslistに「Android >= 5」や「Android >= 6」と書いているのを見かけますが、Androidの場合は5未満のバージョンしか対象ブラウザのターゲットが変わらないので意味がないです。

0.1%などのパーセント指定はやめたほうが良い

Browserslistは「> 0.1%」のように書けばバージョンではなくシェアで対象ブラウザを設定できます。

例えば「> 0.1% in JP, not dead」と書けば「日本でシェア0.1%のサポートされているブラウザ」ということになります。

これだと年月が経過してもシェアによる判定なのでBrowserslistを更新せず済むので楽ですが、対象ブラウザが自動で変わるのは問題があります。

対象ブラウザが自動で変わるということはAutoprefixer, Babel, PostCSSなどのコードも自動で変わるということを意味しているからです。

パーセント指定は書き出されるコードが変わることにより予期せぬバグを誘発するリスクがあるため、パーセント指定はやめたほうが良いです。

現時点での推奨は？

これらを踏まえると、現時点での推奨は、
last 3 versions
not dead
iOS >= 12, Safari >= 14
Android >= 5
あたりが無難なのではないかと思います。