css预处理器在目前的开发中是很受欢迎的,但是它们也有一些缺点。在今天的介绍中,我们将探讨postcss的优势以及它是如何工作的,还有其一些丰富而且实用的插件。
大多数CSS开发人员都非常熟悉css预处理器,像sass、less、stylus等,以及伴随着这些预处理器出现的一些概念,比如file partials, nesting, variables 和 mixins等。随着css的发展,预处理器的一些功能正在渐渐的被原生css所实现,但是还有大量非常实用的功能对于开发者开发大型项目以及维护保持代码的一致性方面是及其有用的。
你可能很难想象没有 CSS 预处理器的生活,但它也有缺点:
好处超过了这些风险,但还有另一种选择……
PostCSS不是一个预处理器(尽管它可以表现得像一个)。这是一个 Node.js 工具,它采用有效的 CSS 并对其进行增强。即使是那些使用 Sass、Less 或 Stylus 的人,也经常在初始 CSS 编译之后运行 PostCSS 步骤。您可能遇到过 PostCSS Autoprefixer 插件,它会自动将-webkit、-moz和-msvendor 前缀添加到需要它们的 CSS 属性中。
就其本身而言,PostCSS 什么都不做。它是一个解析器,它对 CSS 代码进行标记以创建抽象语法树。插件可以处理此树并相应地更新属性。一旦所有插件都完成了工作,PostCSS 会将所有内容重新格式化为字符串并输出到 CSS 文件。
大约有 350 个插件可用,大多数都执行单一任务,例如内联@import
声明、简化calc()
函数、处理图像资产、语法检查、缩小等。PostCSS插件目录中提供了更加用户友好的插件搜索。
PostCSS 的好处包括:
inset
属性转换回top
、right
、bottom
和left
属性。随着时间的推移,随着更多浏览器支持inset
。PostCSS 需要Node.js,但本教程演示了如何从任何文件夹安装和运行 PostCSS——即使是那些不是 Node.js 项目的文件夹。您还可以使用 webpack 、Parcel、Gulp.js 和其他工具中的 PostCSS ,但我们将坚持使用命令行。
通过运行以下命令在您的系统上全局安装 PostCSS:
npm install -g postcss-cli
通过输入以下内容确保其正常工作:
postcss --help
你至少需要一个插件来做任何实际的事情。PostCSS导入插件是一个不错的选择,它内联所有@import
声明并将您的 CSS 合并到一个文件中。像这样全局安装它:
npm install -g postcss-import
要测试此插件,请打开或创建一个新的项目文件夹,例如cssproject
,然后src
为您的源文件创建一个子文件夹。创建一个main.css
文件以加载所有部分:
/* src/main.css */
@import '_reset';
@import '_elements';
然后_reset.css
在同一文件夹中创建一个文件:
/* src/reset.css */
* {
padding: 0;
margin: 0;
}
跟着这个_elements.css
文件:
/* src/elements.css */
body {
font-family: sans-serif;
}
label {
user-select: none;
}
通过传递输入 CSS 文件、插件列表--use
和--output
文件名,从项目的根文件夹运行 PostCSS:
postcss ./src/main.css --use postcss-import --output ./styles.css
如果您没有任何错误,以下代码将输出到styles.css
项目根目录中的新文件:
/* src/main.css */
/* src/reset.css */
* {
padding: 0;
margin: 0;
}
/* src/elements.css */
body {
font-family: sans-serif;
}
label {
user-select: none;
}
/* sourceMappingURL=data:application/json;base64,...
注意PostCSS可以在任何地方输出CSS文件,但输出文件夹必须存在;它不会为您创建文件夹结构。
默认情况下会输出内联源映射。在 HTML 页面中使用编译后的 CSS 文件时,在浏览器的开发人员工具中检查它会显示原始src
文件和行。例如,查看<body>
样式将突出显示src/_elements.css
第 2 行而不是styles.css
第 8 行。
您可以通过在命令中添加--map
(或-m
)开关来创建外部源映射。postcss除了 CSS 文件更干净并且浏览器不需要加载源映射之外,几乎没有什么好处,除非开发者工具是打开的。
您可以使用 删除源映射--no-map
。在为生产部署输出 CSS 文件时始终使用此选项。
Autoprefixer
插件通常是开发人员第一次接触 PostCSS 。它根据浏览器使用情况和caniuse.com定义的规则添加供应商前缀。供应商前缀在现代浏览器中使用较少,这些浏览器将实验性功能隐藏在标志后面。但是,仍有一些属性,例如user-select
需要-webkit-
、-moz-
和-ms-
前缀。
使用以下命令全局安装插件:
npm install -g autoprefixer
然后将其作为命令中的另一个--use
选项引用postcss:
postcss ./src/main.css --use postcss-import --use autoprefixer --output ./styles.css
检查第 11 行的声明styles.css
以查看供应商前缀属性:
label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
AutoPrefixer 使用browserslist模块来确定要添加哪些浏览器前缀。默认值为:
> 0.5%
:市场份额至少为 0.5% 的浏览器last 2 versions
:这些浏览器的最后两个版本Firefox ESR
: 包括 Firefox 扩展支持版本not dead
: 任何未停产的浏览器您可以通过创建.browserslistrc文件来更改这些默认值。例如:
> 2%
或者,您可以在 Node.js 项目中添加一个"browserslist"数组。package.json例如:
"browserslist": [
"> 2%"
]
cssnano 通过去除空格、注释和其他不必要的字符来缩小 CSS。结果会有所不同,但您可以预期文件减少 30%,您可以将其部署到生产服务器以获得更好的网页性能。
全局安装 cssnano:
npm install -g cssnano
然后将其添加到您的postcss命令中。我们还将包括--no-map
禁用源地图:
postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css
这会将 CSS 文件减少到 97 个字符:
*{margin:0;padding:0}body{font-family:sans-serif}label{-webkit-user-select:none;user-select:none}
--watch
当任何源文件发生更改时,PostCSS选项会自动构建您的 CSS 文件。您可能还想添加在--verbose
构建发生时报告的开关:
postcss ./src/main.css --use postcss-import --use autoprefixer --use cssnano --no-map --output ./styles.css --watch --verbose
您的终端将显示Waiting for file changes
. 对任何文件进行更改并styles.css
重新构建。PostCSS 也会报告任何问题,例如语法错误。
要完成,请按Ctrl + C
或Cmd + C
在终端中。
随着您添加更多插件和选项,该postcss命令将变得冗长而繁琐。您可以创建一个 JavaScript 配置文件,该文件定义了所有选项,并且可以从逻辑上确定它是在开发环境中运行还是在生产环境中运行。
postcss.config.cjs
在项目文件夹的根目录中创建一个名为的配置文件。请注意以下几点:
您可以将文件放在另一个文件夹中,但您需要--config <dir>
在运行时指定postcss
您可以postcss.config.js
用作文件名,但 PostCSS 可能在已"type": "module"设置的Node.js 项目中失败package.json
将以下代码添加到postcss.config.cjs
:
// PostCSS configruation
module.exports = (cfg) => {
const devMode = (cfg.env === 'development');
return {
map: devMode ? 'inline' : null,
plugins: [
require('postcss-import')(),
require('autoprefixer')(),
devMode ? null : require('cssnano')()
]
};
};
PostCSS 传递一个cfg
包含命令行选项的对象。例如:
{
cwd: '/home/yourname/cssproject',
env: undefined,
options: {
map: { inline: true },
parser: undefined,
syntax: undefined,
stringifier: undefined
},
file: {
dirname: '/home/yourname/cssproject/src',
basename: 'main.css',
extname: '.css'
}
}
模块必须返回一个带有可选属性的对象:
map
:源地图设置parser
: 是否使用非 CSS 语法解析器(如scss插件)plugins
:要按指定顺序处理的插件和配置数组上面的代码检测postcss命令是否有--env
选项。这是设置NODE_ENV
环境变量的快捷方式。要在开发模式下编译 CSS,请运行postcss并--env development
(可选)设置--watch --verbose
. 这将创建一个内联源映射并且不会缩小输出:
postcss ./src/main.css --output ./styles.css --env development --watch --verbose
要在生产模式下运行并在没有源映射的情况下编译缩小的 CSS,请使用以下命令:
postcss ./src/main.css --output ./styles.css
理想情况下,您可以将它们作为终端或npm脚本运行,以进一步减少打字工作。
您现在了解了 PostCSS 的基础知识。增强功能是添加和配置更多插件的问题。投入一些时间,您很快就会拥有一个可以适应任何 Web 项目的工作流程。
关于如何使用 PostCSS 作为Sass 的可配置替代品的教程提供了更多配置示例和插件选项。
更多链接: