Description
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