Sass 3.4 發佈了
Natalie Weizenbaum 於 2014 年 8 月 19 日發表
我們一直試圖加快 Sass 的發佈速度,看來我們成功了。距離Sass 3.3發佈僅僅五個月,我們就宣布 Sass 3.4.0(代號 Selective Steve)正式發佈。更快的發佈頻率意味著每個版本的主要功能會減少,所以這次只有兩個重要的更新(當然,還有許多小改進,你可以在更新日誌中查看)。正如版本名稱所示,這兩個新功能都與選擇器有關。
在 SassScript 中使用 &在 SassScript 中使用 & 的永久連結
「SassScript」是我們對 Sass 用於變數、屬性值等的迷你語言的稱呼。它主要就是CSS值,但也支援自訂函式、算術等等。在 Sass 3.4 中,我們新增了一個新功能的支援:父選擇器,&。
大多數 Sass 使用者可能都認得世界各地選擇器中出現的 &,它用於明確地引用父選擇器。例如,在 .parent { .child & { ... } } 中,& 指的是 .parent,這會編譯成 .child .parent { ... }。
現在,& 在 SassScript 中的作用也大致相同。它指的是同一個父選擇器,但它不是直接被插入,而是作為一個列表的列表公開,以便函式輕鬆地檢查和操作它。例如,如果你寫 .foo .bar, .baz { $selector: & },$selector 將會是 ((".foo" ".bar"), (".baz",))。
我們原本計畫在 3.3 版中加入這個功能,但當我們意識到很難以一種在包含逗號時不會出錯的方式使用這些選擇器時,我們將其移除。因此,我們決定將它延後一個版本,以便我們有時間想出它的配套功能:選擇器函式。
選擇器函式選擇器函式的永久連結
只公開 & 的問題是,使用它的唯一方法是將它們與其他選擇器作為字串拼湊在一起。這在簡單的情況下可以正常運作,但是當你寫 #{$selector} .child 而 $selector 是 .foo, .bar 時,你想要的是 .foo .child, .bar .child,但你得到的卻是 .foo, .bar .child。這一點都不好。
為了解決這個問題,我們新增了一系列函式,它們使用 Sass 強大的內建選擇器邏輯來做正確的事情。例如,你現在可以寫 selector-nest(".foo, .bar", ".child") 並得到你想要的結果。這些函式都返回與 & 使用的相同的巢狀列表表示形式,但它們接受的內容非常寬鬆:從巢狀列表到普通的字串都可以。
如果你想查看我們想到的所有選擇器函式,請查看更新日誌。不過,我想特別強調幾個我特別喜歡的函式。你已經見過了 selector-nest(),而 selector-append() 是它的近親。它們之間的區別在於空格:selector-nest() 在其選擇器之間添加一個空格,而 selector-append() 則不會。這表示 selector-append(".foo, .bar", "-suffix") 會返回 .foo-suffix, .bar-suffix。
另一個我非常喜歡的功能是 selector-replace()。它可以在一個選擇器中搜尋並替換另一個選擇器,但它比基本的字串替換更聰明。它使用 Sass 的 @extend 邏輯來*語義地*替換選擇器,就像所有符合替換選擇器的元素也符合被替換的選擇器一樣。例如,selector-replace(".foo.bar.baz", ".foo.baz", ".qux") 會返回 .bar.qux。
最後一個我想讓你注意的真正強大的函數是 selector-unify()。它接受兩個選擇器,並返回一個新的選擇器,該選擇器只匹配*同時*符合兩個輸入選擇器的元素。這是 Sass 內部大量使用的一個操作,現在用戶也可以使用它。例如,selector-unify(".foo.bar", ".bar.baz") 會返回 .foo.bar.baz。
接下來是什麼?接下來是什麼?永久連結
我不排除 Sass 3.5 出現的可能性,但Chris 和我計劃相當專注於 Sass 4.0。4.0 的主要功能將是 @import,或者更確切地說是缺少它。我們目前的導入系統開始顯得過時,我們打算徹底取代它,包括名稱在內。從 4.0 開始,引入其他 Sass 檔案的建議方法將是 @use。
在我們為 @use 規劃的功能中,有兩個是廣泛被要求的。您將能夠直接將 CSS 樣式表導入到 Sass 樣式表中,而且每個樣式表只會運行一次,無論它被導入多少次。
在此之前,請運行 gem update sass 並享受 Selective Steve!