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)
评论