V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
CoolSpring
V2EX  ›  CSS

有没有可能在开发时写 Tailwind CSS,在提交代码前转换成带嵌套关系的 Sass?

  •  
  •   CoolSpring · 2022-07-31 14:20:01 +08:00 · 2171 次点击
    这是一个创建于 831 天前的主题,其中的信息可能已经有所发展或是发生改变。
    背景:
    我在自己的 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 ,并且也没那么方便进行“一把梭”了,和这个想法的初衷不符。
    第 1 条附言  ·  2022-07-31 17:07:17 +08:00
    相似但不太一样的方案补充:
    3. 退一步,提取内联样式(元素的 style 属性)到 CSS 文件的工具应该早已有之。我资历尚浅,请教各位这种实践(新写一个页面时全写内联样式,调整到满意后,提取到单独的 CSS 文件中)常见吗?
    3 条回复    2022-07-31 17:17:29 +08:00
    estk
        1
    estk  
       2022-07-31 14:33:15 +08:00
    tailwind 写多了也复杂,还是项目开始前把整套 UI 规范定义好,用自己定义的样式,不过这个需要前期花很多时间,有时候老板等不及
    rioshikelong121
        2
    rioshikelong121  
       2022-07-31 16:18:24 +08:00
    修改组内规范。
    whitegerry
        3
    whitegerry  
       2022-07-31 17:17:29 +08:00
    找了好久 tailwind 的 Compilation Mode ,原来 windi 有这个方案。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2554 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 15:26 · PVG 23:26 · LAX 07:26 · JFK 10:26
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.