@useの使い方がわからない…ので

ウェブDeBLOG｜トライデントコンピュータ専門学校 Webデザイン学科

トライデントコンピュータ専門学校 Webデザイン学科の最新情報を紹介しています。学生へのインタビュー記事から学生作品の解説、Webデザイン・マークアップ・プログラミングの授業風景、プロジェクト発表会、名古屋のWeb制作会社情報、イベント参加レポートやWeb制作の技術解説などWeb制作に関連する記事を掲載しています。トライデントコンピュータ専門学校は、いま話題の名古屋駅からユニモール地下街を歩いて3分です。

<< 2021年度「卒業研究制作展」終了しました。

第5回「専門学校HTML5作品アワード」入選 >>

2022.02.12 [土] @useの使い方がわからない…ので

最終更新:2022.02.19Webサイト制作Tips Web技術

春休みになりました。長期休暇に、普段調検証できないことを、いろいろと調べて勉強していきたいですね。
今回は、ずいぶんと一般的になった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によって読み込まれるスタイルシートは「モジュール」と呼ばれます。

と書かれています。

公式のドキュメントに記載されているサンプルで試してみます。
scssのコンパイルは、Webクリエイターボックスさんでも紹介されているPreprosで行います。このPreprosですが、私も以前から使っていて、ブラウザでのLive preview機能、SassだけでなくLessやStylusやTypeScriptのコンパイルにも対応していて、FTPでサーバーにファイルを上げる時に差分ファイルだけを上げる機能など、Node.jsを使う程のこともない時に重宝しています。無料でも使えるので、みんな使えばいいのに。

_code.scssと_lists.scssを@useでstyle.scssに読み込みコンパイルします。

//foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

//foundation/_list.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

// style.scss
@use 'foundation/code';
@use 'foundation/lists';

p{
 color: #000;
}

style.cssでは、このように書き出されます。

code {
  padding: .25em;
  line-height: 0;
}

ul, ol {
  text-align: left;
}
ul ul, ol ol {
  padding-bottom: 0;
  padding-left: 0;
}

p{
 color: #000;
}

_code.scssと_lists.scssが合体して、出力されます。

CSSの途中に読み込みたい

@useは上部にまとめて読み込まないと、エラーになります。

// style.scss
@use 'foundation/_code';

p{
 color: #000;
}

@media only screen and (max-width: 600px) {
    @use 'foundation/_lists';
    // @use rules must be written before any other rules.
}

A stylesheet’s @use rules must come before any rules other than @forward, including style rules.
//スタイルシートの@useルールは、スタイルルールを含め、@forward以外のルールの前に置かなければなりません。

@importは、この辺がかなり自由で、あちらこちらに読み込んで利用していました。同じようなことがやりたい場合、どうすれば良いのでしょうか。

@mixinと@includeを使う

@mixinと@includeを使います。まずは、読み込みたいコードを@mixin stylesで設定します。

//foundation/_list.scss
@mixin styles {
  ul, ol {
  text-align: left;

    & & {
    padding: {
      bottom: 0;
      left: 0;
     }
    }
  }
}

_code.scssは、変更していないので、コンパイルすると、style.scssにはエラーが出る前と同じように上部に読み込まれ、出力されます。

@use 'foundation/_code';
@use 'foundation/_lists';

p{
 color: #000;
}

@media only screen and (max-width: 600px) {
    
}

code {
  padding: 0.25em;
  line-height: 0;
}

p {
  color: #000;
}

ただし、この場合エラーは出ませんが、foundation/_lists/は、style.cssにコンパイルされません。
そこで@includeを利用し、_list.scssの中の@mediaの中にmixin stylesを読み込ませてみます。

@use 'foundation/_code';
@use 'foundation/_lists';

p{
 color: #000;
}

@media only screen and (max-width: 600px) {
    @include lists.styles
}

コンパイルすると、

code {
  padding: 0.25em;
  line-height: 0;
}

p {
  color: #000;
}

@media only screen and (max-width: 600px) {
  ul,
  ol {
    text-align: left;
  }
  ul ul,
  ul ol,
  ol ul,
  ol ol {
    padding-bottom: 0;
    padding-left: 0;
  }
}

これで思った通りになりました。

Sassは、入れ子だけでも便利ですが、せっかく導入するのであれば、もっと便利な機能もどんどん使っていきたいですね。

体験入学実施中