這是〈Svelte 從小白到入門〉系列的第十一集，各集連結如下：
- 〈Svelte 從小白到入門（一）元件、事件、Reactivity〉
- 〈Svelte 從小白到入門（二）Props、邏輯、迴圈、Await〉
- 〈Svelte 從小白到入門（三）事件〉
- 〈Svelte 從小白到入門（四）數據綁定〉
- 〈Svelte 從小白到入門（五）生命週期〉
- 〈Svelte 從小白到入門（六）Store〉
- 〈Svelte 從小白到入門（七）動態效果〉
- 〈Svelte 從小白到入門（八）進出場效果〉
- 〈Svelte 從小白到入門（九）動畫效果〉
- 〈Svelte 從小白到入門（十）Action〉
- 〈Svelte 從小白到入門（十一）CSS Class〉
- 〈Svelte 從小白到入門（十二）Slot〉
- 〈Svelte 從小白到入門（十三）Context〉
- 〈Svelte 從小白到入門（十四）Svelte 的特殊元素〉
- 〈Svelte 從小白到入門（十五）Module Context〉
- 〈Svelte 從小白到入門（十六）Debugging〉
- 〈Svelte 從小白到入門（十七）結束與展望〉
CSS Class
想在 Svelte 元件中的 HTML 區域置入簡單的 JS 敘述一般會這樣做：
<button class="{current === 'foo' ? 'selected' : ''}">foo</button>
利用 Svelte 提供的 {} 大括號插入 JS 敘述，上面我們用簡單的三元表達式來決定要帶入的 CSS class。
但對於 CSS class 的添加，Svelte 有更簡便的語法，像是這樣：
<button class:selected="{current === 'foo'}">foo</button>
當 current 為 foo 時，按鈕就會被添加 selected 的 CSS class，方便我們少打幾個字。
完整的範例如下：
如果要套用的 CSS class 又剛好和 JS 變數同名：
<div class:big={big}>
<!-- ... -->
</div>
上面的意思是，如果 JS 變數 big 為 true 則套用 CSS class .big。
因為同名，Svelte 讓我們用更簡短的寫法表達：
<div class:big>
<!-- ... -->
</div>
耶又可以少打幾個字！
完整的範例如下：
Share
