2019年PostCSS入门

如果您曾经想在代码中尝试新的，实验性的或非标准的CSS属性，那么您就会知道，浏览器供应商要求您添加前缀才能使它们起作用，直到完全标准化为止。

.some-element {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;  // chrome, safari prefix
 -moz-box-sizing: border-box;     // firefox
 -o-box-sizing: border-box;       // old opera versions
 -ms-box-sizing: border-box;      // IE, Microsoft Edge
 }

您必须监视不同的CSS属性，以了解浏览器供应商何时开始支持它们，此时您可以删除相应的前缀。

幸运的是，现在有了Autoprefixer。 这是npm的CLI工具，可扫描您的代码，并使用“我可以使用”中的值将供应商前缀添加到CSS规则中。 Autoprefixer是许多PostCSS插件之一，它抓住了PostCSS的精髓。

什么是PostCSS ?

PostCSS是使用JavaScript插件转换CSS的工具。 它通过其广泛的插件生态系统提供功能，以帮助改善CSS编写体验。 您可以选择所需的插件，甚至自己编写一个自定义插件。

通常，PostCSS插件使您能够像平常一样编写纯CSS，一旦被调用，它们就会扫描代码以执行所需的转换。

但是请注意，有些PostCSS插件不会转换纯CSS，而是以类似Sass的语法运行。 一个示例是PostCSS简单变量插件，该插件可让您实现变量（就像在Sass中一样），您可以在整个代码中重复使用这些变量，如下所示。

$color-brand: darkgrey;
$font-size: 1em;
body {
 color: $color-brand;
 font-size: $font-size;
}

这个特性在这个时候不是特别相关，因为/CSS variables/已经作为CSS中的一个固有特性发布，PostCSS可以将最新的CSSNext语法转换成旧浏览器可以理解的友好CSS。

为什么要使用PostCSS？

让我们通过其插件的功能来看看PostCSS的一些用例。

Autoprefixing

如前所述，Autoprefixer插件将使用“我可以使用”中的值将供应商前缀添加到CSS属性。 这可以减少代码中的混乱并提高可读性。 例如，此输入：

:fullscreen {
}

给出以下输出：

:-webkit-:full-screen {}
:-moz-:full-screen {}
:full-screen {}

使用浏览器可以理解的CSSNext功能

使用PostCSS Preset Env插件，您可以编写将来的CSS语法，并且该插件将通过制定必要的polyfill将其转换为浏览器可以理解的CSS。 例如，此输入：

@custom-media --med (width <= 50rem);

@media (--med) {
  a { 
    &:hover {
      color: color-mod(black alpha(54%));
    }
  }
}

给出以下输出：

@media (max-width: 50rem) {
  a:hover  { 
    color: rgba(0, 0, 0, 0.54);
  }
}

避免CSS中的错误

stylelint插件指出CSS代码中的错误。 它支持最新的CSS语法。 例如，此输入：

a { 
  color: #d3;
}

提供此输出：

app.css
2:10 Invalid hex color

使用本地范围的CSS类名称

使用CSS Modules插件，您可以编写在本地范围内限于组件的CSS，这意味着CSS类名之间的通用性不会有任何冲突。 例如，此输入：

.name {
  color: grey;
}

提供此输出：

.Logo__name__SVK0g {
  color: gray;
}

创建惊人的网格

LostGrid插件使用calc（）根据您定义的分数创建网格，而无需传递很多选项。 例如，此输入：

div {
  lost-column: 1/3 
}

给出以下输出：

div {
  width: calc(99.9% * 1/3 -  
  (30px - 30px * 1/3)); 
}
div:nth-child(1n) {
  float: left; 
  margin-right: 30px; 
  clear: none; 
}
div:last-child {
  margin-right: 0; 
}
div:nth-child(3n) {
  margin-right: 0; 
  float: right; 
}
div:nth-child(3n + 1) {
  clear: both; 
}

PostCSS，Sass和Less之间的区别

PostCSS可以完成与Sass，Less和Stylus等预处理器相同的工作，但是PostCSS是模块化的，以我的经验，速度更快。

PostCSS和CSS预处理器之间的主要区别在于，您可以选择所需的功能。 Sass and Less可为您提供许多您可能会使用或可能不会使用的功能，以及您无法扩展的功能。

如果您希望将Sass，Less或Stylus保留在当前堆栈中，但仍希望让PostCSS执行Sass无法执行的其他功能（例如，自动前缀或衬里），本文将详细介绍如何做到这一点。

还有一些PostCSS插件，例如PostCSS Sass和PreCSS，它们实际上是Sass的完整替代品。 这意味着您可以从字面上编写自己的由PostCSS支持的预处理器。

使用Codepen快速设置PostCSS

首先登录到Codepen.io，然后执行以下步骤：

1、新建一支笔。

2、单击窗口顶部的设置以显示设置面板。

3、从顶部选项卡中选择CSS以显示CSS设置。

4、选择CSS Processor下拉列表，然后从下拉列表中选择PostCSS。

5、单击需要附加组件？ 显示的徽章。 将显示一个加载项列表，您可以从中搜索并选择所需的插件。 让我们添加postcss-simple-vars插件来试验变量。 选择保存并关闭。

返回CSS窗口，您会注意到该插件已被引用使用。 现在，我们可以自由使用其所有功能。

@use postcss-simple-vars;

在CSS窗口中使用变量插入示例HTML和CSS：

演示

其他设置方法

有多种方法可以使用Gulp，Webpack或Parcel等构建工具来设置PostCSS。 在本文中，我将重点介绍如何使用PostCSS CLI。

PostCSS CLI

安装npm后，在命令行上运行以下命令：

npm install -g postcss-cli

或使用yarn

yarn global add postcss-cli

您还可以使用npm将插件添加到项目中。 例如：

yarn add --dev autoprefixer postcss-nested postcss-cli

在我们的项目中，通常可以通过以下方式使用PostCSS插件转换CSS：

postcss --use autoprefixer -o main.css css/*.css

上面的命令将通过/ css /文件夹中包含的所有文件运行Autoprefixer，并将转换后的CSS输出到main.css中。 您还可以使用别名来运行命令，方法是将其添加到package.json文件中的脚本中：

{
...
"scripts": {
 "start": "node index.js",
 "postcss": "postcss --use autoprefixer -o main.css css/*.css"
  }
...
}

创建React App和Vue

值得一提的是，脚手架的React和Vue项目（例如Create React App和VueCLI）在内部使用PostCSS。 还请注意，内部PostCSS设置了一些select插件。 您可以添加更多具有更多配置的插件。

结论

PostCSS是一个非常有用的工具，已经存在了一段时间。 它鼓励您编写更多普通的CSS，并允许您使用或编写自己的强大插件来对其进行转换。 学习此工具或至少进一步意识到其用途将在2019年改善您的前端工作流程。

以上就是2019年PostCSS入门的详细内容，更多请关注0133技术站其它相关文章！