Less 簡易說明 ~"" 使用範例 - daniel-qa/Vue GitHub Wiki

Less 簡易說明 + ~"" 使用範例

1️⃣ Less 基本概念

Less 是 CSS 預處理器，可以用變數、巢狀、運算、Mixin、函數。

編譯後會生成標準 CSS，瀏覽器只認 CSS，不直接認 Less。

適用於 純 CSS 專案 或 Vue 2 / Vue 3 專案。

2️⃣ 常用功能

// 變數
@primaryColor: #42b983;

// 巢狀
.box {
  color: @primaryColor;
  .title {
    font-size: 16px;
  }
}

// 運算
@width: 200px;
@halfWidth: @width / 2;

.box {
  width: @halfWidth; // 100px
}

// Mixin
.rounded(@radius: 5px) {
  border-radius: @radius;
}

.box {
  .rounded(10px);
}

3️⃣ ~"" 使用情境

目的：阻止 Less 在 calc() 或運算符號（+、-、*、/）中提前計算，保持原樣輸出給 CSS。

常見情境：% - px、50% * 2、calc() 裡的各種公式。

// ❌ 直接寫，Less 可能報錯
.box1 {
  height: calc(100% - 45px);
}

// ✅ 正確寫法，阻止 Less 計算
.box2 {
  height: ~"calc(100% - 45px)";
}

// ✅ CSS 變數搭配 Less 變數
@offset: 45px;
.box3 {
  height: ~"calc(100% - @{offset})";
}

編譯後 CSS：

.box2 {
  height: calc(100% - 45px);
}
.box3 {
  height: calc(100% - 45px);
}

💡 小結

Less 變數：編譯期，固定值，不動態。

~""：防止 Less 搶先計算，常用於 calc() 或不同單位運算。

Vue 動態值：用 CSS 變數 + style binding 可以做到運行期動態修改。