2015年5月3日 星期日

SASS 吐槽第二彈

又要來吐槽 SASS 了:
案例一: 既然 expression 可以在 property value 計算, height: (500px/2); width: 10px + 20px, width: $width/2; 變成 expression,那為何 font: 10px/8px; 跟 10px * px 就變成 string?
案例二: 承上,既然除法不能算,那我多加一個加法,就突然可以算了耶 e.g., 5px + 8px/2px
案例三: 長度除以長度不是應該是純量嗎? 5px + 8px/2px,5px 可以跟 4 相加耶。 重新試了一下 5px + 4 這樣也會變成 9px. squint 表情符號
計算行為真是有夠不一致的,不過認真說,到底要怎麼樣讓語法可以相容 font: 10px/22px 這種寫法又可以支援 expression? 強迫都用 interpolation ?

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?