こんにちは。Keitaです。最近コーディングに欠かせないSCSS。
その中で、新しい概念であるuseを使うdart-sassについてお勉強したいと思います。
SCSSについてはこちらの記事
に触れていますので、おさらいしながら書いていきます。
@importの廃止
SCSSを使う時、分割したファイルをまとめる時、@importを使うと思います。
この＠import、2021年10月には非推奨、2022年10月には廃止になるので、
どうしても、覚える必要があったため、検証しながら、学んでいます。
dart-sassとは？
今まで使っていた、Sassはnode-sassと言うもので、新しいuseを使うには、
dart-sassと言うモジュールを使う必要があります。
今までの書き方
style.scssに出力されるとして、_util.scssがmixin,_common.scssが共通、_top.scssがトップページのSCSSとします。
style.scss
@import 'util';
@import 'common';
@import 'top';コンパイル時@importで各ファイルやmixin,関数を出力し、まとめ、CSSを出力します。
_util.scss
//vw変換
$viewport:750; //デザインカンプをみて設定
@function pxtovw($num, $width: $viewport) {
@return floor-decimal(1vw * $num / $width * 100);
}_top.scss
body{
font-size:pxtovw(16);
}pxtovwと言う関数を使います。出力されるとvwに変換される関数です。
このように、@importを使えば、ファイルを分割しても、1つにまとめることができます。
useを使った書き方
style.scss
@use 'common';
@use 'top';こちらは@importをuseに書き換えるだけですが、utilは省略します。
_top.scss
@use 'util' as ut;
body{
font-size:ut.pxtovw(16);
}ここが大きなポイントです。ここで指定するuseはutilを呼ぶために使います。
また、その関数を使うため、as 〜と言うものを設定します。これを名前空間といい、
そのmixinのファイルの関数を使いなさいよ、と言う指示になります。
この名前空間は全てのmixin,関数を使う時に必要になります。
_util.scssのpxtovwの関数を使う場合、ut.pxtovw(16)のように名前空間.関数の記述で描く必要があります。省略はできません。省略するとコンパイルせず、関数がそのままCSSに吐き出されてしまいます。
useを使う場合の注意
関数やmixinを使う場合、各ファイル毎にその関数を呼ぶためuseを使う。
複数のファイルで、同じmixinファイルを使う場合、必ず、@useを記述する必要があります。
名前空間はファイル名と違うわかりやすい名前で
名前空間をファイル名と違う名前にする必要があります。
Gulpfile.jsの設定方法
インストール
ターミナルで、
npm install dart-sassでインストールします。
gulpfile.jsの記述
//略
const sass = require('gulp-sass');
sass.compiler = require('dart-sass');
//略
function sassComp(){
//従来の記述
}Sassを使う関数はsassと言う名前は使わないでください。
sass.complierでdart-sassを使うことを明示します。
その他の概念
@forwardと言う概念もありますが、こちらは今勉強中です。
一般的に複雑なものを使わない限り、@useで事足りるかと思います。
まとめ
このように、廃止、非推奨が近づいている技術については、積極的に学習し、すぐ案件で使えるようになれば、備えあれば憂いなしといったところでしょう。
自分もこれをコンパイルできた時、ほっとしました。
なんとか生き延びれそうです。（大袈裟ですが笑）
コメント