乐趣区

关于css:效率提升之lessscsscss名称编写

痛点

因为笔者是做商业化流动相干开发,为了编写一系列炫酷的页面,须要在 tsxjs或者 vue 中编写一堆的 class/className; 而后须要手动的将 dom 树中的class/className 中的值复制到 less/sass/css 文件中。能够设想你每天都在进行这样的操作,当组件 / 页面比拟多的时候,编写款式将会是十分苦楚的。

由此

基于 每天都在手动 copy class 到款式文件中 ,cmd+c 曾经敲坏了,笔者利用 babel 将源码解析成 ast,并格式化成对应的 less/css/scss 文件; 其外围解析库为 parse-jsx-to-css;

目前反对:

  • Reactclass/function组件解析成less/css/scss;
  • Vue 的组件解析成less/css/scss;
  • React 中反对多个组件款式

暂未反对:

  • class/className表达式的状况

一个简略的例子

React 代码:

import React, {PureComponent} from "react";
function LoginButton() {return <div className="login-button"></div>;}
class Demo extends PureComponent {render() {
    return (
      <div className="login-container">
        <div className="login-container--user-name"></div>
        <div className="login-container--password"></div>
      </div>
    );
  }
}

export default Demo;

生成的 less/scss 代码:

.login-button {
}

.login-container {&--user-name {}
  &--password {}}

读到这里,冲动的心油然而生,到底应该怎么去应用呢?

应用

为了关照宽广前端同学,笔者开发了 在线版本 以及 vscode 插件版本; 后续将会反对idea 插件

在线版本

在线尝试

应用非常简单:

  • 输出代码
  • 抉择要转换的框架和生成的格局

vscode 插件

vscoce 插件装置

应用此插件很简略,只须要在 vscode 的插件市场中搜寻 parse-to-css-vscode-plugin, 在须要转换的文件(vue/jsx/tsx/js) 文件中 右键 抉择对应性能即可。

开源

  • 外围解析库: parse-jsx-to-css
  • 在线及 vscode 插件: parse-jsx-to-css-plugins

欢送各位同学一起独特保护此开源库,也欢送各位 star;

作者: mrgaogang

退出移动版