Dart Sassに移行するための覚書

はじめに

この投稿は超個人的なメモですので読んでもわかりにくいです。
気が向いたらわかりやすく編集しようと思います。

「@import」から＠「@use」へ

「_setting.scss」ファイルを使用すると仮定して

変数やmixin、関数など使う時は「@use “setting”;」を記述

演算

【pxからvwに（SCSS）】を利用するとき

_setting.scssファイル先頭に「@use “sass:math”;」を記述

演算に「/」が使えないので下記に変更

PC用

@return (($pxValue / $viewport) * 100) + vw;
↓
@return (math.div($pxValue, $viewport) * 100) + vw;

SP用

@return (($pxValue_sp / $viewport_sp) * 100) + vw;
↓
@return (math.div($pxValueSp, $viewportSp) * 100) + vw;

変数

変数名、mixin、の前に「setting.」を付与する
background-color: setting.$green;

@include

@include setting.★★★　→　@include setting.★★★