2015年5月1日 星期五

一些 SASS 的詭異編譯行為

最近在研究 SASS 的 Syntax 跟 Behaviour 發現相當多詭異的地方,根據這篇文章 All You Ever Need to Know About Sass Interpolation 探討 SASS 的 Interpolation:

其中像是:

width: calc(10px + 10px);

會被當成 string 編譯成:

width: calc(10px + 10px);

所以為了安插 Expression,就要寫成:

width: calc(#{ 10px + 10px });

而:

$some: 20px;
width: calc(100% - $some);

會變成

width: calc(100% - $some);

但:

 -webkit-transition: all 10s + 1s cubic-bezier(.1 + .1, .10, .25, .90);

Function 裏頭的 Expression 還是會照常編譯,變成:

-webkit-transition: all 11s cubic-bezier(0.2, 0.1, 0.25, 0.9);

根據該文 linear-gradient 也是把 function params 當成 string,但是在新版 SASS 行為卻又不同了;

background: linear-gradient( 10deg + 45deg, blue, #000000 + #010101);

直接編譯成:

background: linear-gradient(55deg, blue, #010101);

啥?

再來看一些例子.. SASS Reference 內提到 expression 之間如果有空白或者逗號就是 List 表示,那麼我假設下面這樣是 List:

>> abc blacc abc
("abc" "blacc" "abc")

這樣是沒錯的,那再來試試看別的:

>> abc blacc a#{test} abc
"abc blacc atest abc"

居然變成 String 了,好吧文件上寫說可以用圓括號將 List 括起來,那這樣呢?

>> (abc blacc a#{test} abc)
"abc blacc atest abc"

居然還是 String .... WTF?