当前位置: 首页 > Web前端 > CSS

less-scss-css名字写效率提升

时间:2023-03-31 02:18:47 CSS

痛点由于作者是做商业活动相关的开发,为了写出一系列炫酷的页面,需要在tsx中写一堆class/className,js或vue;然后您需要手动将dom树中class/className中的值复制到less/sass/css文件中。可以想象你每天都这样做。当组件/页面很多的时候,写样式会很痛苦。因此,在每天手动将class复制到style文件的基础上,cmd+c已经坏掉,作者使用babel将源码解析成ast,格式化成对应的less/css/scss文件;它的核心解析库是parse-jsx-to-css;目前支持:将React的class/function组件解析成less/css/scss;将Vue组件解析成less/css/scss;React中暂不支持多种组件样式:class/className表达式case的简单示例React代码:importReact,{PureComponent}from"react";functionLoginButton(){return

;}classDemoextendsPureComponent{render(){return(
);}}导出默认演示;生成的less/scss代码:.login-button{}.login-container{&--user-name{}&--password{}}读到这里,兴奋油然而生,应该怎么用呢?为了照顾广大前端同学,笔者开发了在线版和vscode插件版;后续会支持idea插件在线版。在线尝试使用很简单:输入代码选择要转换的框架和生成的格式vscode插件vscoce插件安装和使用这个插件很简单,搜索parse-to-css即可-vscode插件市场中的vscode-plugin,在需要转换的文件(vue/jsx/tsx/js)中右键选择相应功能开源核心解析库:在线parse-jsx-to-css和vscode插件:parse-jsx-to-css-plugins欢迎各位同学共同维护本开源库,并欢迎大家star;添加一名作者