Dart Sassとちゅう
#Sass #CSS
はじめに
夏前くらいに見たけど、見ないふりしてました。
(こちらの記事で:https://kojika17.com/2020/05/next-generation-sass-module-system.html)
でもさすがにそろそろまずいよねってことで年内にインプットします。
公式:https://sass-lang.com/dart-sass
The Module System is Launched
https://sass-lang.com/blog/the-module-system-is-launched
必ずしもDart Sassに移行しないといけないわけではないけど、
公式はこれを推奨しているみたいです。
記述方法の変更については後述しますが、今後は新機能などもDartSassから実装されていくだろうし、
ぼちぼち移行していかないといけないのかなという印象。
/icons/hr.icon
追記:公式のブログに以下の記事が上がってたので、やっぱり移行必須でした。
LibSass is Deprecated
https://sass-lang.com/blog/libsass-is-deprecated
/icons/hr.icon
Sassで徐算する
いつもどおりやったらコンパイラに怒られました。動いたけど。
code:今まで.scss
@function rem($px) {
@return ($px / 16) * 1rem;
}
code:エラー文.cmd
Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.
Recommendation: math.div($px, 16)
More info and automated migrator: https://sass-lang.com/d/slash-div
https://sass-lang.com/documentation/breaking-changes/slash-div
今は/でも割ってくれるようですが、将来的(2.0.0)には/は使えなくなるそうです。
code:これから.scss
@use "sass:math";
@function rem($px) {
@return math.div($px , 16) * 1rem;
}
divっていうのはdivision(割り算)の略。divタグじゃない。