Atomizer创建 Atomic CSS 工具
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)评论
