將十六進制值轉換爲完整的十六進制值，較少的預處理

Question

我一直在遇到像Koala和Prepros（OSX 10.10.5，Yosemite）這樣的較少預處理工具的語法問題，我簡單定義了一個顏色值 - 十六進制（例如#fff，＃000等）將在最終的.css文件中輸出爲#fffffff或#000000。

這裏是我觀察到一個簡單的例子：

// In variables.less (css-preprocessed/variables.less) 
@white: #fff; 

// In styles.less (css-preprocessed/application/less/styles.less) 
@import '../../variables.less'; 
.container { 
    background-color: @white; 
} 

// In styles.css (css-preprocessed/application/css/styles.css) 
.container { 
    background-color: #ffffff; 
} 

請注意，這個問題是相當新的。我沒有增加這些相應工具的任何設置。每個都是開箱即用的。

Answer 1

這一直是Less編譯器舊版本中的行爲。速記顏色值始終轉換爲十六進制數字。這已經作爲v 2.5.2發行版的一部分得到了修復，並且如果將它們作爲一個提供，那麼這些值現在將保持爲簡寫形式。

從Less Changelog：

速記顏色會留速記

所以，如果你升級編譯器的最新版本，那麼這個問題會自動消失。

在最新版本中，下面的代碼越少：如果您使用的是更少的編譯器的移植版本（：Try it]

@white: #fff; 
.container { 
    background-color: @white; 
} 

將編譯成

.container { 
    background-color: #fff; 
} 

注說Less4j或LessPHP），那麼你可能還需要檢查他們的變更日誌，看看他們何時採取了這種行爲（並且如果他們還沒有這樣做，就提出一個功能請求）。

---

在所有的舊版本，速記顏色將被轉換到手寫每當

• 顏色不直接分配到財產，但通過可變這樣做的形式。
• 顏色變量的值是以顏色本身的形式提供的，而不是字符串。也就是說，該值不會包含在引號內（並在打印時轉義）。

如果您不能升級編譯器的版本，然後以避免轉換爲手寫格式將在引號包住變量的值，而輸出逃生的唯一途徑。這樣做會使Less編譯器將它視爲一個字符串並按原樣輸出該值。

在舊版本中，下面的代碼更少：

@a: #fff; 
@b: "#fff"; 
a{ 
    color-1: #fff; 
    color-2: @a; 
    color-3: ~"@{b}"; 
} 

將編譯成

a { 
    color-1: #fff; 
    color-2: #ffffff; /* note how this is converted */ 
    color-3: #fff; /* while this isn't */ 
} 

你應該注意，這樣做會影響您想進行任何顏色通道操作上的值，並將需要使用color()函數轉換爲顏色對象。我不建議這樣做只是爲了避免本質上是一個非常小的問題。