春休みになりました。長期休暇に、普段調検証できないことを、いろいろと調べて勉強していきたいですね。
今回は、ずいぶんと一般的になったSassの@useの使い方について調べてみました。
Sassとは
Sass(Syntactically Awesome StyleSheet)とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。
直訳すると「文法的に素晴らしいスタイルシート」で、Sassのページには「世界で最も成熟した、安定した、強力なプログレードのCSS拡張言語です。」と記載されています。
以前は、LessやStylusなど他のCSSメタ言語もよく聞かれたのですが、最近ではSassの話題ばかりになっています。
ちなみに、CSSメタ言語とは、CSSの生産性向上の為に拡張された技術のことです。
Sassを導入するメリットは、
- 入れ子の使用が可能
- 変数を利用できる
- 四則演算が可能
- 関数を使用できる
- ミックスイン・継承による効率化
- ファイルを分割して管理できる
が、上げられます。
私も、ファイルを部品ごとに分割して管理したり、reset CSSを別ファイルで読み込む場合など便利に利用しています。
CSSの@importと違って、Sassの@importはビルドすると合体されるため、HTTPリクエストの数が増えることがなく、読み込みスピードに大きな影響がありません。
また、進化の過程でSassの種類も変化してきました。主な種類は、
- Ruby Sass:Ruby製。2019年サポート終了。
- LibSass:C++製。現在、主流。
- Dart Sass:Dart製。公式推奨。
と、移ってきました。
今はLibSassが主流のようですが、公式で推奨されているため、だんだんとDart Sassが使われるようになってきています。
そんな便利に使ってきた@importですが、今後数年間で、段階的に廃止され、最終的にはSassから完全に削除されるようです。「代わりに@useルールを優先してください」とのことです。
※遅くても、2022年10月1日には廃止されるみたいです。
@useを使ってみる
単純に@importを@useに変えればいいんでしょ、と思って使ったら躓きました。。。
ということで、早急に@importの代わりに@useの使い方を理解しないといけないわけなので、調べてまとめてみました。
Sassのドキュメントには、
このルール(@use)は、他の Sass スタイルシートからMixin、関数、変数を読み込み、複数のスタイルシートの CSS を一緒に結合するものです。@useによって読み込まれるスタイルシートは「モジュール」と呼ばれます。
と書かれています。