駆け出しWebエンジニアの勉強日記vol.3

だいぶ間が空いてしまいました。この期間何をしていたかと言うとポートフォリオサイトのデザインを改修し、PostgreSQLを学んでいました。
さて今回はSassの勉強での備忘録を記したいと思います。

Sassとっても便利ですよね。初めて知った時は感動を覚えました。
そのSassも2022年に大幅な変更があったようで、ホームページを作るにあたりつまづいた点について書いていこうと思います。

@iｍportの廃止

これが一番大きいです。いままでiｍportをずっと使っていた私にとってuseはただ書き換えるだけでは動かずに色々なサイトをみて勉強しました。
私はmixinやcolorなど細かくファイル分けをしたい人だったので、なぜ読み込めないのか随分苦労しました。
importとuseのそれぞれの記述パターンを以下に記します。

1.@importでscssファイルを読み込みスタイルをそのまま利用している

base.sass

body {
 color:#333
}

style.sass

-@import "base";
+@use "base";

この場合であれば単純に@importを@useに書き換えるだけでコンパイルしてくれます。簡単ですね。

2.@importで変数を読み込み利用している

_variable.sass

$color-text: #333;

style.sass

 -@import "variables";
 +@use "variables";

body {
 -color: $color-text;
 +color: variables.$color-text;
}

この場合ただ@importを@useに変え、使用したい箇所に$color-textをあててもコンパイルしてくれません。
variables.$color-textというように@useではデフォルトでファイル名に応じた名前空間を持つためvariables.$変数名という記載が必要になります。

variablesなんて毎回書くの面倒だな…と思ったそこの貴方に朗報です。
以下の記述をすることでvariablesの部分を別の名前に置き換えることができます。

@use "variables" as var;

body {
  color: var.$color-text;
}

@use "variables" as var;のようにas 変更したい名前を記載することで以後、varという名前でも変更ができるようになりました。
応用として＠use "variable" as *;とすることで変数名の前のvar自体を省略することも可能です。

3.@importでmixinを読み込み利用している

こちらはbreakpointでよくある問題です。私も引っ掛かりました。
失敗例で私は以下の_breakpoints.sassファイルを使用していました。

_breakpoints.sass

// ブレークポイントとmixin
$breakpoints: (
  "sp": "screen and (max-width: 767px)",
  "tb": "screen and (min-width: 768px) and (max-width: 1024px)",
  "pc": "screen and (min-width: 768px)",
) !default;

@mixin mq($breakpoint: pc) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

その後レスポンシブデザインで以下の記述を行いましたが、コンパイルエラーが発生しました。

@use "sass:map";
@use "breakpoints";
  
@include mixin.mq(pc) {
    display: none;
  }
}

理由はというと、@includeでmixinを呼び出しているのに読み込み先にmixinが無いというエラーでした。
ですので頭に@use "breakpoints"を指定していたとしても、@include mixin.mq(pc)のmixin部分はbreakpointsに変更しないといけないというわけです。

ですので解決方法は、@use "breakpoints";→@use "mixin";
_breakpoints.sass→_mixin.sass
とすることで問題なくブレイクポイントがコンパイルされてくれるようになりました。

4.複数scssファイルを一つのファイルに集約して読み込み利用している

これは複数Sassファイルを作って管理している人に一番影響がありそうです。例えば以下の例があります。

_variable.sass

$color-text: #333;

_mixin.sass

$bg-color: #F4FBFF;

@mixin bg() {
  background-color: $bg-color;
}

例なので少ないですが_header.sass、_fv.sassなどパーツによって細かく分けている人の場合、読み込みで複数のSassファイルをstyle.sassに読み込むと管理やコードが長くなったりと保守性に関わることになります。
その場合まとめて一括でutils.sassといった管理ファイルにまとめることができます。

utils.sass

 -@use "variables";
 -@use "mixin";

 +@forward "variables";
 +@forward "mixin";

この場合は@forwardを使用します。
なぜ@importや@useを使わないかというと、@useには呼び出したファイル内でのみ要素が利用できるという特性があるからです。
utils.sassはただの管理ファイルであるため、以下の記述でstyle.sassでの利用ができるようになります。

@use "utils";
body {
 color: utils.$color-text;
 @include utils.bg();
}

＄関数の前の呼び出し先の名前がutilsであるところには注意です。

Sassについては以上です。いかがだったでしょうか？
読んだだけではわからないことも、いろいろと手を動かすことで見えてくるものもあり学ぶことは楽しいなと日々感じています。
牛歩ではありますが、立派なwebクリエイターになるためにこれからも頑張ります！