以數字開頭的 class element

如果 HTML code 如下

<span>Hello</span>&nbsp;
<span class="123">John Smith</span>

而 CSS 寫成如下，是無法作用的

.123{
	font-weight: bold;
	color: CornflowerBlue;
}

SASS/SCSS處理 CSS 變數的問題

這是我使用他人套件時遇到的坑。

在使用 SASS / SCSS 時，遇到如下的 code

$red: #DB055E;

:root {
	--red: $red
}

.danger {
	color: var(--red)
}

我預期他應該會生成

:root {
	--red: #DB055E;
}
.danger {
	color: var(--red);
}

但實際上卻是生成

:root {
	--red: $red;
}
.danger {
	color: var(--red);
}

Maven 自動 Compile SASS/SCSS （使用 us.hebi.sass plugin）

在前一篇文章《Maven 自動 Compile SASS/SCSS （使用 nl.geodienstencentrum.maven plugin）》中提到使用 nl.geodienstencentrum.maven 這個 plugin 可以自動 compile SASS。

但這 plugin 是使用已經淘汰的 Ruby SASS（現在推薦使用 Dart SASS），且經過測試，只能支援到 Java 11（我自己是沒有 Java 12 ~ 16），Java 17（含）以上都會出現 Error。

於是我又另外去找，找到 us.hebi.sass 這個 plugin 。

Maven 自動 Compile SASS/SCSS （使用 nl.geodienstencentrum.maven plugin）

SASS / SCSS 太強了
而且他還沒有使出全力的樣子
對方就算沒有 @mixin 或是 @include 也會贏
我甚至覺得有點對不起他……

不得不說，SCSS 真的太好用了。

就算沒有 @mixin 或是 @include，光是巢狀架構的處理就夠好用了。

雖然現在 CSS 也開始要支援巢狀寫法（Using CSS nesting - CSS: Cascading Style Sheets | MDN (mozilla.org)），但是現在 CSS 的複雜度都已經媲美 JS 了，還要追加巢狀架構，我真心覺得這些 web 委員會是不是沒事找事做啊。

不提這個，這邊只是要記錄一下，如何在 Java Maven 讓其在 compile / package 時，自動編譯 SASS