首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
V2EX  ›  分享创造

写了一个用于快速开发页面的样式生成工具 luxcss

  •  
  •   ibeta · 111 天前 · 1087 次点击
    这是一个创建于 111 天前的主题,其中的信息可能已经有所发展或是发生改变。

    luxcss 是什么?

    luxcss 是一个样式生成工具,它可以监听你在 html/wxml/vue/jsx 文件中写的类名,并且自动生成该类名所代表的样式。简单地说,你只需要在页面写上你需要的类名,luxcss 会自动生成你需要的样式。

    示例

    • 我们在项目中有以下 html 代码
    <div class="lux-bgc00b51d lux-w110 lux-h30 lux-cfff lux-bdrs4">
      按钮
    </div>
    
    • luxcss 会自动生成以下 css 代码
    .lux-bgc00b51d {background-color: #00b51d;}
    .lux-w110 {width: 110px;}
    .lux-h30 {height: 30px;}
    .lux-cfff {color: fff;}
    .lux-bdrs {border-radius: 4px;}
    

    luxcss 试图解决快速开发中的一些问题

    • 命名:不再纠结于命名,直接写样式就可以了
    • 流畅:不再需要在 html/css 文件间频繁的切换
    • 复用:拷贝过来的代码已经附带了所有样式

    在使用过程中,luxcss 具有以下优势

    • 自动监听文件更改,快速生成所需样式
    • 只会生成你需要的样式,避免冗余的代码
    • 参照 emmet cheat-sheet 表,拥有大量常用的样式可以使用
    • luxcss 作为一个工具,不依赖框架,它可以监听单个文件,多个文件,也可以按照既定规则监听一个路径下的文件
    • 可以配置单位,vw/rem/px/rpx 等
    • 支持常用的样式:百分比 /负值 /小数点 /数字

    项目地址: https://github.com/aibeta/luxcss

    5 回复  |  直到 2019-02-27 10:13:04 +08:00
        1
    xiaotuzi   111 天前 via iPhone
    你这样反而把 class 的意义弱化了。
    class 就是给你定义不同样式的,而 class 如何命名并不能单单指它的样式,也可以为某个模块而命名,让前端开发者更灵活。
    你还不如写 css 的辅助类,比如 text-center 类就是 text-align:center 的样式。
    我觉得你应该是写辅助类,可能你表述的有问题。
        2
    ibeta   111 天前
    @xiaotuzi

    命名是说我们在需要快速还原一个复杂的设计时,准确的命名每一个部分是需要耗费很大精力的,luxcss 提供了一个方式可以避免这个问题,就是完全使用您指的辅助类。

    以辅助类作为切入点来使用这个工具也是很好的。text-align:center; 已经包含在了里面,使用 .lux-ta-c 可以生成。

    可以参考 https://docs.emmet.io/cheat-sheet/ 。几乎所有常用的样式都包含在里面。
        3
    moomesy   110 天前
    直接写样式就写 style 好了,干嘛写这个,而且类名也是为了聚合
        4
    meszyouh   110 天前 via Android
    那怎么把这个类写出来?
        5
    ibeta   110 天前
    @moomesy 使用 emmet 语法,可以节省时间
    @meszyouh 比如 emmet 使用 d:f 可以生成 display: flex; 那么 .lux-d-f 就会生成这个类
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3726 人在线   最高记录 5043   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 18ms · UTC 05:38 · PVG 13:38 · LAX 22:38 · JFK 01:38
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1