Prefix样式前缀

AXUI的css样式是使用"_"前缀作为命名空间的,他应该为私有或独有的特殊字符,用户不应该再使用该字符来写css样式;该前缀可通过powershell文件批量修改,修改之后重新打包即可。

前言

为了避免全局污染,AXUI的css样式类和css变量使用_短下划线作为命名空间,所以你会看到AXUI的css文件会有注入以下命名方式:

 
._alert{}
--_alert-w:40rem;

使用_短下划线开头表示该样式私有,专属于AXUI,用户不能再拿该前缀定义样式类。如果用户的项目与AXUI深度融合了,希望保持统一的代码风格,则可以将_替换成用户的专属前缀,除了-_两个css文件允许的特殊字符外,可以是其他英文字母或其他特殊字符。

需要注意的是,在css文件中,唯二合法的特殊字符是-_,如果需要使用其他特殊字符则需要进行转义处理,举例说明如下:

 
//在css中"+"的转义方法是:"+"
<style>
  .+btn{}
</style> 
<span class="+btn"></span>

批量替换前缀

AXUI所有的样式源文件放在src/styles目录下,里面有less和相应的css文件;在src目录有个文件为replaceCssPrefix.ps1,该文件是powershell文件,用来批量替换scr/styles目录下的css前缀,该文件使用方法是:右键=>使用powershell运行,按提示进行操作即可替换css前缀。

  1. 输入Y执行策略
  2. 输入被修改的样式前缀,如果默认是_,可以直接按下回车键到下一步
  3. 输入将要使用的前缀(特殊字符需要转义),按下回车键到下一步
  4. 对比确认是否需要替换前缀,确认则输入Y,并按下回车键
  5. 替换完成
  6. 打包css文件(npm run build)