PostCSS官方版

PostCSS简介

PostCSS提供样式转换功能，可以在软件中转换CSS样式。软件的主要功能是通过插件转换样式，提供200多个插件转换不同的样式，方便用户在设计新页面时获取更多的样式，节省自己编辑样式的时间。可以在软件分析中加入CSS，结合内置的API函数快速修改样式内容。还可以通过api函数查询语法错误。PostCSS可以解决大部分css设计问题，优化页面、图像和字体，设置可变内容和HTML样式，利用丰富的插件资源设计不同类型的CSS，满足大部分行业编辑CSS样式的需求！

PostCSS软件功能

外部程序

目前，PostCSS有200多个插件。您可以在插件列表或可搜索目录中找到所有插件。以下是我们最喜欢的插件列表——可以在PostCSS上构建的插件的最佳演示。

如果你有什么新想法，PostCSS插件开发真的很容易。

首先，解决全局CSS问题

postss-use允许您在css中显式设置PostCSS插件，并且只对当前文件执行它们。

postss-modules和react-css-modules自动隔离组件中的选择器。

postss-toreset是全局复位的替代方案，更适合于可隔离的组件。

postss-initial添加了all: initial支持，这将重置所有继承的样式。

Cq-plyfill增加了容器查询支持，允许样式响应父项的宽度。

第二，立即使用未来的CSS

Toprefixer使用“我可以使用”中的数据来添加供应商前缀。

postss-preset-env允许你在今天使用未来的css函数。

第三，更好的CSS可读性

Precss包含功能类似于Sass的插件，例如变量、嵌套和混合。

postss-排序对规则及其内容进行排序。

postss-utilities包括最常用的快捷方式和助手。

肖特增加和扩展了许多速记类别。

四.图像和字体

postss-assets插入图像大小并内联文件。

生成图像向导。

字体魔术师生成@font-faceCSS中需要的所有规则。

postss-inline-svg允许您嵌入SVG并自定义其样式。

postss-WTE-svg允许你直接用css编写简单的SVG。

css中的Webp在CSS背景中使用WebP图像格式。

css中的AvIF在CSS背景中使用IF图像格式。

动词 （verb的缩写）棉短绒

Stylelint是一个模块化样式表lint。

Stylefmt是一个根据stylelint规则自动格式化CSS的工具。

Doiuse lints CSS，用于浏览器支持，使用“我可以使用它”中的数据。

Colorguard可帮助您保持一致的调色板。

不及物动词其他人

postss-RTL在一个css文件中组合了双向(从左到右和从右到左)样式。

Cssnano是一个模块化的CSS减速器。

Lost是一个功能丰富的calc()网格系统。

Rtlcss反映了从右向左区域设置的风格。

七.句法

PostCSS您可以用任何语法转换样式，而不仅仅是CSS。如果还不支持您最喜欢的语法，您可以编写解析器和/或序列化器来扩展PostCSS。

Sugarss是一种基于缩进的语法，例如Sass或Stylus。

postss-语法通过文件扩展名自动切换语法。

postss-html解析

PostCSS软件特色

增强代码的可读性

使用从“我可以使用”网站获得的数据为CSS规则添加特定于制造商的前缀。Autoprefixer会自动获取浏览器的流行度和支持的类别，并根据这些数据自动为你的CSS规则添加前缀。

未来的CSS会带到今天！

PostCSSpresenv帮助您将最新的CSS语法转换为大多数浏览器都能理解的语法，并根据您的目标浏览器或运行时环境确定您需要的聚合填充。该函数基于cssdb。

结束全局CSS

CSS模块可以让你永远不用担心过于流行的命名带来的冲突，只需使用最有意义的名字即可。

避免CSS代码中的错误

通过使用stylelint加强一致的约束并避免样式表中的错误。Stylelint是一个现代的CSS代码工具。它支持最新的CSS语法，包括类似CSS的语法，比如SCSS。

PostCSS使用说明

PostCSS快速入门指南:咕噜声设置

先决条件

使用Grunt时，我们假设您已经安装了使用它的先决条件:

Node.js

新公共管理理论

装备

请确保您已经在全局安装了Grunt CLI，并通过遵循Web设计命令行了解其基本用法:使用gruntautomation。另外，请按照教程“Grunt的安装项目”中的说明进行操作。在继续之前，您应该有一个包含以下内容的项目文件夹:

一个“咕噜文件”

“package.json”文件

Grunt已安装在“node_modules”文件夹中，并设置为项目的开发依赖项。

PostCSS通过咕噜

在项目文件夹中，添加两个子文件夹，一个名为“src”，另一个名为“dest”。“src”文件夹将保存您未处理的CSS文件，而PostCSS将把编译后的CSS文件写入“目标”文件夹。

接下来需要做的是将PostCSS的Grunt插件安装到你的项目中:我们将使用Grunt-postss来处理编译。

在指向项目文件夹的终端/命令提示符下，运行命令:

npm安装grunt-postss & # 8211；保存-开发

此时，您的项目结构应该如下:

打开您的咕噜文件进行编辑，并添加咕噜文件所需的所有基本代码外壳:

在这种情况下，我们将使用grunt.loadNpmTasks()函数加载grunt-postcss插件，如下所示:

现在，我们准备开始为运行postcss配置Grunt任务。首先，在grunt.initConfig()刚刚添加的行上方添加一个函数:

其中，设置一个名为postcss的对象，如下所示:

在新的postcss对象中，我们将添加两个嵌套对象，一个名为options，另一个名为dist:

options对象将保存PostCSS的配置，dist对象将坚持我们的CSS文件应该在哪里读写。

现在，在项目的“src”文件夹中创建一个名为“style.css”的CSS文件。向其中添加一些测试代码，例如:

现在更新dist对象，指定“src/style.css”作为我们的源文件，指定“dest/style.css”作为我们想要生成的文件:

，在options对象中添加一个名为pcessors的空数组。这是我们将配置PostCSS插件以供以后使用的地方。现在，只需将其更新为:

运行测试编译

现在你的基本任务已经准备好了。要进行测试，请在终端/命令提示符仍然指向项目文件夹的情况下运行以下命令:

咕噜邮政编码

在您的终端中，您应该会看到以下消息:

现在，在Destination文件夹中，您应该会找到一个新的“style.css”文件，它包含与“src”文件夹中的“style.css”文件相同的代码。

添加PostCSS插件

接下来，我们将添加一系列PostCSS插件和包:Autoprefixer(添加供应商前缀)、cssnext(启用未来语法)和precss(使用功能扩展，如Sass)。

运行以下命令，将每个命令安装到项目中:

注意:cssnext和precss的安装可能需要一些时间，因为它们是多个插件的组合。

现在，我们准备通过之前创建的pcessors阵列加载每个插件。将阵列更新为以下内容:

让我们继续，现在向源代码“style.css”文件中添加一些测试代码，看看我们新设置的PostCSS插件是否如预期的那样工作。

删除文件中的现有内容，并添加以下CSS:

尚你的照片

/[/k0/然而，这带来的是确保其他想要从事该项目的人拥有相同的PostCSS插件设置。由于npm，这可以通过它的依赖管理系统来处理。

因为& # 8211；每次在项目中安装插件时，Save-dev都会使用此标志，因此它将作为开发依赖项添加到“pject.json”文件中。这意味着，如果您想与其他人共享您的项目，他们可以安装npm，在他们共享的包上运行命令，并自动安装所有相同的插件。