Gulp/Grunt 获取触笔工作表中的所有颜色变量，并将它们作为变量定义写入文件

Gulp/Grunt grab all color variables in a Stylus sheet, and write them to a file as variable definitions

本文关键字：变量 文件 定义 有颜色 获取 Grunt 工作 Gulp      更新时间：2023-09-26

从目录中的一组.styl文件中，找到所有使用变量作为颜色的CSS属性，并生成定义这些变量的colors.styl文件（奖励：或在现有文件的占位符中插入生成的字符串）。

例：

.
└── styl
    ├── library
    │   └── palettes-package.styl
    └── my-styles.styl
2 directories, 2 files

style/my-styles.styl

@import "library/palettes-package"
body 
    background-color: palettes-red-1
p
    color: palettes-grey-1
span
    border: 1px solid #000000

style/libraries/palettes-package.styl

palettes-red-1 = #FF0000
palettes-grey-1 = #EEEEEE

结果

palettes-red-1 = #FF0000
palettes-grey-1 = #EEEEEE

作为要追加到文件中的字符串。

奖金也包括

calculated-1 = #000000

#000000在my-styles.styl中被替换为calculated-1。

您可以尝试 https://www.npmjs.org/package/grunt-css-parse 并使用 value 属性上的 regulär 表达式对结果进行后处理，以识别包含颜色代码（十六进制 rgb 和 rgba 值）的规则。

相关文章：