创建 Atomic CSS 工具 Atomizer

╰+哭是因爲堅強的太久メ 2022-05-19 07:48 325阅读 0赞

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)

[React]: https://github.com/facebook/react
[Ember]: https://github.com/emberjs/ember.js/
[Angular]: https://github.com/angular/angular.js

发表评论取消回复

表情：

评论列表（有 0 条评论，325人围观）

还没有评论，来说两句吧...

相关阅读

相关 Atom汉化

汉化包下载： [https://download.csdn.net/download/badao\_liumang\_qizhi/10739973][https_downlo

朱雀/ 2023年10月18日 10:19/ 0 赞/ 103 阅读

相关 Atom简介

什么是Atom? Atom 是 Github 专门为程序员推出的一个跨平台文本编辑器。具有简洁和直观的图形用户界面，并有很多有趣的特点：支持CSS，HTML，JavaSc

曾经终败给现在/ 2023年10月18日 10:18/ 0 赞/ 108 阅读

相关 boost：atomic

使用引用库 atomic库需要编译才能使用： > 在jamfile里指定lib的语句是：`lib boost_atomic`。 > 在cmakeli

川长思鸟来/ 2022年10月13日 12:50/ 0 赞/ 262 阅读

相关 atomic

原子操作原子（atomic）本意是“不能被进一步分割的最小粒子”，而原子操作（atomic operation）意为“不可被中断的一个或一系列操作”。处理器

左手的ㄟ右手/ 2022年09月12日 11:47/ 0 赞/ 320 阅读

相关 atom 编辑器

似乎又接触到了一个新的编辑器 Atom ，github的产品，不知道是不是因为github的缘故，我对这款编辑器充满了期待。因为久仰github的大名,便下载一个玩玩。官网

矫情吗；*/ 2022年07月14日 05:39/ 0 赞/ 310 阅读

相关 Atom介绍

官网：https://atom.io/ Atom是GitHub推出的一款编辑器, 被称为21世纪的黑客编辑器. 其主要的特点是现代, 易用, 可定制. 现在来总结各编辑

桃扇骨/ 2022年06月18日 04:40/ 0 赞/ 349 阅读

相关 Atom工具总结笔记

参考资料：使用Atom打造无懈可击的Markdown编辑器： [http://www.cnblogs.com/libin-1/p/6638165.html][http_

冷不防/ 2022年06月15日 03:25/ 0 赞/ 201 阅读

相关 atom快捷键

站在巨人的肩膀上：文章转自[http://fresky.github.io/2014/07/16/atom-cheat-sheet-for-windows/][http_fr

朴灿烈づ我的快乐病毒、/ 2022年06月14日 11:23/ 0 赞/ 280 阅读

相关 react-native开发工具Atom

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

深藏阁楼爱情的钟/ 2022年05月22日 08:27/ 0 赞/ 260 阅读

相关创建 Atomic CSS 工具 Atomizer

Atomizer 详细介绍 Atomizer 是一个创建 Atomic CSS 的工具，它适用于模板框架的组件，例如 [React][]、[Ember][] 和 [Angul

╰+哭是因爲堅強的太久メ/ 2022年05月19日 07:48/ 0 赞/ 326 阅读