创建 Atomic CSS 工具 Atomizer

最新推荐文章于 2025-03-24 20:14:14 发布

原创最新推荐文章于 2025-03-24 20:14:14 发布 · 743 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

当前文章被收录于：

前端

300 篇文章 5 人学习

订阅专栏查看详情

angular

当前文章被收录于：

angular

101 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

Atomizer是一款用于生成Atomic CSS的实用工具，特别适用于React、Ember和Angular等模板框架的组件。通过解析文本来查找Atomic CSS类，并从这些类中生成配置文件，最终产出符合需求的Atomic CSS样式。

Atomizer 详细介绍

Atomizer 是一个创建 Atomic CSS 的工具，它适用于模板框架的组件，例如 React、Ember 和 Angular。

示例代码：

var Atomizer = require('atomizer');
var defaultConfig = {    
    "breakPoints": {        
      'sm': '@media(min-width=750px)',        
      'md': '@media(min-width=1000px)',        
      'lg': '@media(min-width=1200px)'
    },     
    "custom": {       
       "1": "1px solid #000",        
       "foo": "2px dotted #f00"
    },    
     "classNames": [        
       'Bd(1)',        
       'Bd(foo)',        
       'Bd(foo)--sm',        
       'Bd(foo)--md',        
       'D(n)!'
    ]
};
var atomizer = new Atomizer({verbose: true});
// Parse text to find Atomic CSS classes
var foundClasses = atomizer.findClassNames('<div class="D(n)! P(10px) M(20%) Bd(1) Bd(foo)--sm"></div>');
// Generate Atomizer configuration from an array of Atomic classnames
var finalConfig = atomizer.getConfig(foundClasses, defaultConfig);
// Generate Atomic CSS from configuration
var css = atomizer.getCss(finalConfig)