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

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

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 https://github.com/MoOx/postcss-cssnext/issues/203
postcss-apply https://github.com/pascalduez/postcss-apply

為了測試這個 @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

Rplus / rplus.github.io

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