[POST] CSS @apply rule (native CSS mixins)

[Rplus]

CSS @apply rule (native CSS mixins)
by Serg Gospodarets 2016-04-11
https://blog.gospodarets.com/css_apply_rule

CSS at-rules 可能又要多一個成員了

CSS variables + @apply 可視為 SCSS syntax 裡的 @mixin & @include 組合

syntax example (via: overflow-ellipsis-mixin | Serg Gospodarets Blog )

// DEFINE
:root {
  --mixin-overflow-ellipsis: {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
// USE
.overflow-box{
  @apply --mixin-overflow-ellipsis;
}

基本上 spec 就只是個簡單粗暴規則
至於之後會被眾人開發成什麼奇怪的形狀就不得而知了 XDDD

說不定又會再一次推翻 @mixin 的趨勢哩 XD
related post: http://csswizardry.com/2016/02/mixins-better-for-performance/

目前(2016/04/11)可以在 Canary 去 flags 頁啟用它
而 fallback 可以透過 PostCSS-apply 來處理成 mixin 的樣子

不過這樣硬刷當然是沒有原生的好玩~
原生的可以盡情亂改 variables 讓繼承的大家一起動起來~ 哈哈~ XD

這篇文章裡很有趣的一段是用 JS 來判斷支援度
基本上就是自己生一個 <style> 後裡塞入正規的 @apply syntax 再去看看 computedStyle 有沒有如預期的變化

算是一篇從規格、支援度、fallback 都有帶到的介紹文~

不過有點好奇能不能用 CSS 的 @supports () 來判斷呀？

fb: https://www.facebook.com/rplus.tw/posts/1098601140207668
tw: https://twitter.com/RplusTW/status/719552820089741312

---

---

---

related:

CSS from the Future
by Zeke Sikelianos 2016-04-08
http://zeke.sikelianos.com/css-from-the-future/

fb: https://www.facebook.com/rplus.tw/posts/1098350420232740
tw: https://twitter.com/RplusTW/status/719392148248891392

---

---

---

related link:

• CSS @apply Rule https://tabatkins.github.io/specs/css-apply-rule/
• CSS from the Future http://zeke.sikelianos.com/css-from-the-future/
• Custom CSS mixins < Styling local DOM < Polymer https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-css-mixins
• postcss-cssnext 歡迎 PR 來支援 @apply Add mixins by new proposal MoOx/postcss-cssnext#203
• postcss-apply https://github.com/pascalduez/postcss-apply

[Rplus]

為了測試這個 @apply 的行為比較像 SCSS 裡的 @mixin 還是 @extend

我寫了下面這個測試
http://codepen.io/anon/pen/qZxJVY?editors=0100

:root {
  --pink-theme: {
    color: var(--main-color, #f00);
    background-color: #ccc;
  }
}

body {
  --main-color: #00f;
  background-color: #0f0;
  @apply --pink-theme;
  text-shadow: 0 1em var(--main-color);
}

@supports (@apply --pink-theme) {
  body {
    background-color: #ff0;
  }
}

就目前的結果來說，
@apply 不能吃 scope 裡的 variables 只能直接吃宣告位置吃到的變數的表現看起來是有像 @extend
但對於應用位置的順序又能夠覆蓋 scope 裡的樣式，又像是 @mixin 的樣子~
可能還要再觀察一陣子~

ps: @supports () 看起來沒法跟 其它 at-rule 混用 O_Q