V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
find456789
V2EX  ›  问与答

怎么给一个 css 文件里的每个 selector 添加一个前缀 .aaa

  •  1
     
  •   find456789 · 2021-09-11 18:45:28 +08:00 · 991 次点击
    这是一个创建于 929 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我的 css 文件如下:

    h1{color:red}
    div{color:red}
    p{color:red}
    h4{color:red}
    
    

    我用 js 读取到了这个 css 文件

    我想给这个 css 里的每个选择器,加一个前缀,变成这样

     .aaa  h1{color:red}
     .aaa  div{color:red}
     .aaa  p{color:red}
     .aaa  h4{color:red}
    
    

    我这样做的目的是,不想破坏全局样式,只想让这些样式应用在 .aaa 这个 class 里

    想问问大家, 怎么用 js 添加前缀呢?

    因为 css 文件里,的 选择器 每个页面都不同, 所以 要用 js 来动态改, 我想到的方案是用 正则

    但我尝试了好久, 都没有解决

    特来请教大家

    谢谢

    7 条回复    2021-09-11 23:19:08 +08:00
    iBugOne
        1
    iBugOne  
       2021-09-11 19:07:42 +08:00 via Android   ❤️ 1
    放弃 js,用一套更阳间的 css 处理系统,比如 Sass/SCSS
    xell
        2
    xell  
       2021-09-11 19:41:29 +08:00   ❤️ 1
    你真要这么做的话,就去找一个现成的 js 可用的 css 解析器,例如 https://www.npmjs.com/package/cssparser,然后事情就比较简单了。
    troywith77
        3
    troywith77  
       2021-09-11 20:00:28 +08:00   ❤️ 1
    villivateur
        4
    villivateur  
       2021-09-11 20:21:06 +08:00   ❤️ 1
    直接用正则匹配?

    大概就是
    把 ^([\w\d]+{\w+:\w+})
    替换成 .aaa $1
    newbieRenew
        5
    newbieRenew  
       2021-09-11 20:53:44 +08:00 via iPhone   ❤️ 1
    用啥正则,直接复制丢到 scss 里 ,套一层就行了

    .aaa{
    h1{…}
    div{…}
    }
    shapl
        6
    shapl  
       2021-09-11 23:14:35 +08:00   ❤️ 1
    预处理器吖。。。scss 、less 、、、都行。
    shapl
        7
    shapl  
       2021-09-11 23:19:08 +08:00   ❤️ 1
    如果你不想依赖 npm 、不想侵入项目去改动。
    我推荐你使用 vscode 的插件,Easy LESS
    编辑 *.less,会在指定目录输出 *.css

    ```
    {
    "less.compile": {
    "compress": false, //是否压缩
    "sourceMap": false, //是否生成 map 文件,有了这个可以在调试台看到 less 行数
    "out": "../css/", // 是否输出 css 文件,false 为不输出
    "outExt": ".css", // 输出文件的后缀,小程序可以写'wxss'
    },
    }
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3229 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 13:52 · PVG 21:52 · LAX 06:52 · JFK 09:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.