postcss入门_PostCSS快速入门指南：即时设置选项

postcss入门

欢迎使用“ PostCSS深入学习：快速入门指南”。 在本系列的第一篇文章中，我们将着眼于以最快，最有效的方式让您开始使用PostCSS。

在本教程中，我们将从即时设置选项开始，因此从现在起数分钟内您就可以使用PostCSS。 目前，我们有两个即时设置选项：CodePen和Prepros。

让我们看看如何同时使用它们来立即开始使用PostCSS。

通过CodePen发布CSS

如果您是PostCSS的新手，那么开始使用它的最快方法是通过CodePen 。

CodePen现在已经预集成了对PostCSS的支持，以及以下插件和包：

• cssnext
• postcss-简单变量
• postcss放弃评论
• postcss-custom-media
• postcss-media-minmax
• 后条件
• postcss-每个
• 后记
• 后置嵌套
• postcss转换快捷方式

通过选择这些插件，您可以支持将来的语法，类似Sass的功能，注释剥离以及以简写形式编写转换代码的功能。

首先进入CodePen并创建一支新笔 。 然后，单击CSS窗口左上方的小齿轮图标，以调出设置面板。

从标有CSS Preprocessor的下拉列表中，选择PostCSS选项。 您还可以选中标有Autoprefixer的单选按钮以包含该插件。

做出选择之后，您现在应该在下拉菜单下方看到一个黑色的小按钮，标记为需要加载项？ 。 单击该按钮，将打开一个显示@规则列表的面板。 将任何这些@规则复制并粘贴到CSS面板中，以开始使用相应的PostCSS插件。

CodePen使用示例

让我们看一个示例，说明如何从cssnext包开始将可用的PostCSS插件与CodePen一起使用。

在CSS面板的顶部，添加以下代码以指定您要使用cssnext：

@use cssnext;

有了这一行，您现在可以使用http://cssnext.io/features中描述的所有功能。 我们将使用CSS 变量和颜色函数在主体背景上设置颜色。

首先，我们设置一个:root部分，并在其中定义一个CSS变量。 将此添加到您CSS面板：

:root {
  --body_bg_color: black;
}

现在，通过在下面添加以下代码，我们可以在CSS中使用该变量：

body {
  background: var(--body_bg_color);
}

此时，您应该已经看到笔的背景变黑了。 您还可以单击CSS面板顶部的“ 查看已编译”按钮以查看已生成的代码：

现在让我们说，我们正在研究的设计中发现硬黑色有点鲜明，我们想减轻一些。 要调整颜色，我们可以使用将来的语法进行颜色修改。

在声明--body_bg_color变量的行上，将值从black更改为：

--body_bg_color: color(black lightness(20%));

此颜色功能使黑色变亮20％。 现在，您应该看到笔的背景已变为深灰色。

任何受支持的插件都可以以相同的方式在CodePen上使用：

1. 包括您要使用的插件的@规则
2. 根据其说明开始在CSS中使用该插件（您会在上面找到链接）

这是我们刚刚构建的（视觉上不起眼的）演示：

通过Prepros进行PostCSS

Prepros可能不具备CodePen所提供的插件支持范围，但确实包括对Autoprefixer和cssnext的无缝激活。 可以从https://prepros.io下载Prepros。

首先，将包含CSS文件的项目拖放到界面中。 然后单击CSS文件的名称以在右侧打开一个设置面板。 从这里，您可以选中标记为AutoPrefix CSS的框以启用Autoprefixer，并启用Cssnext以便使用cssnext：

现在，您将能够使用cssnext插件包的所有功能，以及自动将CSS前缀。

回顾一下

好的，让我们快速总结一下我们上面介绍的内容：

• 要弄湿PostCSS脚，请尝试使用CodePen或Prepros进行即时设置
• CodePen提供了十个您可以使用的插件/包
• 在CodePenCSS设置中激活PostCSS，然后使用@规则启用特定插件
• Prepros提供了Autoprefixer插件和cssnext包
• 在Prepros项目中任何CSS文件的设置中激活这两个

下一步：任务运行器集成

CodePen和Prepros是两种几乎可以立即使用PostCSS进行启动和运行的好方法。 但是，缺点是您无法决定要使用哪个插件。

当您准备好充分利用PostCSS的全部功能时，您将需要选择并配置自己的插件选择。 可能最方便的方法是通过任务运行器（例如Gulp或Grunt）设置自定义PostCSS项目。

在接下来的两个教程“快速入门指南：Gulp设置”和“快速入门指南：Grunt设置”中，您将学到如何进行操作。

翻译自: https://webdesign.tutsplus.com/tutorials/postcss-quickstart-guide-instant-setup-options--cms-24536

postcss入门