【コーディング】Dart Sassの基本的な書き方の紹介
公開日: 2023.07.18
最終更新日: 2023.07.21
こんにちは！
駆け出しコーダーとして日々業務に励んでいるよこです！
今回の記事はコーディング業務で使っている「Dart Sass」の基本的な書き方を紹介していきたいと思います。
目次
Dart Sassとは
現在公式が推奨しているSassで、@importが廃止となり新たに@use や @forwordを使うように推奨されています。
@useの使い方
@useは@importと同様に呼び出し先を読み込む機能です。
@useには以下の使い方があります。
・ファイル名を名前空間にする。
・任意の名前空間を設定する。
■ファイル名を名前空間にする
これは@useで読み込むファイルパスを指定するだけです。
@use “ディレクトリパス/ファイル名”;
@use “config/variables”;
こうすることでファイル名がそのまま名前空間となります。
■読み込んだファイルの変数などを使う方法
@useで読み込んだファイルの中に記述されている変数やmixinなどを使うには、名前空間を使って呼び出します。
変数はそのまま使えるのではなく、ファイル名.変数名の形での記載が必要です。
例.「config」フォルダにある、「_variables.scss」の変数を「@use」で呼び出して使う場合
config/_variables.scss
$color_grey: #aaaaaa;style.scss
@use "config / variables";
p {
color: variables.$ color_grey;
}
■任意の名前空間を設定する
use宣言にはasをつけて別名にすることもできます。
style.scss
@use "config / variables" as v;
p {
color: v.$ color_grey;
}
@forwardの使い方
@forwardは呼び出し先の変数を1つのファイルにまとめて読み込める機能です。
変数を記載したファイル（_variable.scss）やmixinを記載したファイル（_mixin.scss）など、いろんなファイルでよく読み込むファイルをまとめて読み込みたいときに使用します。
例.「_variables.scss」と「_mixin.scss」をまとめて、@forwardで読み込む場合
_variables.scss
$color_grey: #aaaaaa;_mixin.scss
@mixin fontset {
font-size: 1.6rem;
font-weight: 400;
}_ forward.scss
@forward "variables";
@forward "mixin";トップページのscssファイルなどで、_ forward.scssを読み込み
@use "forward";
p {
@include forward.fontset;
color: forward.$ color_grey;
}math.divの使い方
いままで/（スラッシュ）を使っていた除算処理はコンパイルするときにエラーになります。
必ず最初に@use “sass:math”;と書かないといけません。
div{
width: (100% / 4); //エラーになります。
}のような割り算の記載が廃止となり、div関数に引数を渡す記載に変更となりました。
@use "sass:math";
.div {
width: math.div(100%, 4);
}最後に
簡単ではありましたが、「Dart Sass (scss)」の基本的な書き方を解説しました。
Dart Sassには他にも多くの機能があり、普段業務で使っている機能をまた次回の記事でご紹介できればと思います。
最後まで読んでいただきありがとうございました。
