技术咨询、项目合作、广告投放、简历咨询、技术文档下载 点击这里 联系博主

# 讲真你还在手写 less/css/scss 吗,我想我可以帮助你

# 痛点

由于笔者是做商业化活动相关开发,为了编写一系列炫酷的页面,需要在 tsxjs或者vue中编写一堆的class/className;然后需要手动的将 dom 树中的class/className中的值复制到less/sass/css文件中。可以想象你每天都在进行这样的操作,当组件/页面比较多的时候,编写样式将会是非常痛苦的。

# 由此

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

目前支持:

  • 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插件

# 在线版本

在线尝试 (opens new window)

使用非常简单:

  • 输入代码
  • 选择要转换的框架和生成的格式

# vscode 插件

vscoce 插件安装 (opens new window)

使用此插件很简单,只需要在 vscode 的插件市场中搜索parse-to-css-vscode-plugin,在需要转换的文件(vue/jsx/tsx/js)文件中右键选择对应功能即可。

# 开源

欢迎各位同学一起共同维护此开源库,也欢迎各位 star;

作者: mrgaogang (opens new window)

【未经作者允许禁止转载】 Last Updated: 2/4/2024, 6:06:40 AM