背景:
我在自己的 hobby project 中习惯使用 Tailwind CSS 和 UnoCSS ,觉得开发效率很高,但在工作中需要遵循组内规范使用 Sass 。那么,有没有可能先用原子化 CSS 的写法进行开发,但在 git commit 前用工具转换成 Sass/Less ?
设想的工作流:
先把样式统统写在 class 里,然后用一个 CLI 工具转换,或者用一个 VSCode 插件“重构”。得到的结果是源文件中 JSX 或模版里的长串 class 名被替换成单个随机名称(后续按照其用途人工重命名),并生成一份对应的带嵌套层级的 sass/less 文件。
概括需求:
想一个英文宣传语就是:Write in "Atomic CSS" way, convert to nested CSS before you commit.
是否已有此类型的工具?如果没有,开发一个有意义和技术上的可能性吗?
相似但不太一样的方案:
1. 了解到 Windi CSS 有一个 Compilation Mode
https://windicss.org/posts/modes.html#compilation-mode ,能把一串 class 转化为形如“windi-15wa4me”的单个 class 名,但它这个应该是在编译时生成的产物中出现,而我希望在开发时提交组件的源代码到 GitLab 前就做转换。
2. Tailwind CSS 有 shortcuts ,Sass 有 apply ,但这两者都需要在项目里额外配置 Tailwind CSS ,并且也没那么方便进行“一把梭”了,和这个想法的初衷不符。