# style-picker

**Repository Path**: wangdahu/style-picker

## Basic Information

- **Project Name**: style-picker
- **Description**: vue代码源文件scss/css样式转换式工具
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-23
- **Last Updated**: 2024-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

![logo](./logo.png)

#### 1.主要功能
1. 本软件分析vue源码文件中的`scss/css`的语法及html结构，将vue文件style中的`scss/css`样式声明转换成bs-component-js`移动版`中的css简写并填充到vue文件html对应位置上的class上。
如图所示: 左边为转换前，右边的转换后：
vue里的scss转换前后
![demo2](./scss2.png)
vue里相应的html转换前后
![demo1](./scss1.png)
1. 如果经上一步处理class为空了，则会删除该class
2. 删除项目中的无用的css
3. 删除蓝湖生成的代码中多余的css以及html中的css简写。
4. 将蓝湖上的rgba色值中alpha为1的转换成hex色值。然后按第1步骤进行处理。
   
#### 2.功能限制
1. 只支持class选择器，其它选择器下的样式不处理,原样输出
2. scss注释，::v-deep,/deep/里的样式，scss变量,@mixin,@include,@at-root,css变量声明及引用，伪选择器，伪元素里的样式等均不处理，原样输出
3. 可能会因为scss中的其它语法，会无法转换。可先注释掉这些代码，待转换完之后，再放开。
4. 无法保证不会出现一些未知的错误,最好将生成的代码通过git diff等验证无问题，再提交git.
5. 对于vue中class是根据条件动态生成的,那么相应的scss里的样式，暂时没有处理，可能会误删，请重复第3，第4来排除此问题。

#### 3.使用方法
1. yarn 安装依赖
2. yarn run serve 运行服务
3. 将vue代码粘贴到左侧输入框，点击`转换`，在右侧栏，即可看到生成的代码，点击`复制`即可。
![demo3](./style-picker.png)