26、自定义语法操作：使用PostCSS转换CSS样式

自定义语法操作：使用PostCSS转换CSS样式

1. 引言

在CSS预处理领域，许多开发者已从传统预处理器转向使用PostCSS。需要明确的是，PostCSS并非传统预处理器的替代品，而是一种新的CSS预处理方式。借助一些插件，我们既能享受PostCSS的高效，又能使用熟悉的语法，如Less、SASS或Stylus。下面我们将介绍实现这一功能的插件，并通过简单示例展示如何在PostCSS中使用自定义语法。

2. 自定义语法介绍

W3Schools对CSS语法的定义为：“CSS规则集由选择器和声明块组成。选择器指向要设置样式的HTML元素，声明块包含一个或多个用分号分隔的声明。”

开发者在构建网站时，无论规模大小，最终的CSS样式都应遵循标准语法。但这并不意味着源代码必须是标准CSS，我们可以使用SASS或Less等库，也可以利用API和自定义语法插件直接操作样式。

例如，在为WordPress创建主题时，WordPress默认主题使用SASS（和PostCSS），这意味着存在对SASS的依赖。虽然可以使用gulp - sass插件缓解，但仍依赖libsass编译代码。若能使用API和自定义语法插件解析SASS代码并转换为PostCSS等效代码，就能减少对SASS的依赖。

在开始编写代码前，我们需要安装一个语法高亮器：
- 若使用Sublime Text且已安装Package Control，可按以下步骤安装PostCSS语法高亮器：
1. 打开Sublime Text，按Cmd + Shift + P（OS X）或Ctrl + Shift + P（Linux/Windows）打开命令面板。