Skip to content

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

Open
@Rplus

Description

@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:

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions