css入门_使用PostCSS-cssnext入门未来CSS

末蓝、 2022-12-03 01:48 256阅读 0赞

css入门

![PostCSS-cssnext][]

*To learn all about CSS properties and how to apply them correctly, check out our [AtoZ: CSS][AtoZ_ CSS] course, a complete guide to CSS, letter by letter by expert front-end dev and General Assembly London teacher Guy Routledge.*

*要了解有关CSS属性以及如何正确应用它们的所有知识，请查看我们的[AtoZ：CSS][AtoZ_ CSS]课程，这是CSS的完整指南，由专家前端开发人员和伦敦大会的盖伊·鲁特利奇(Guy Routledge)来信来信。*

Loading the player…

正在加载播放器…

![cssnext Logo][]

A discussion of **PostCSS-cssnext** appeared earlier this year in “7 PostCSS Plugins to Ease You into PostCSS”, published by SitePoint. PostCSS-cssnext is a plug-in pack for writing next generation CSS. This article provides an insight into the project’s history and its benefits. Once we gain a deeper understanding of PostCSS-cssnext, we’ll then jump into a handful of examples for you to play with. By the end of the article, you’ll be well-versed in future CSS syntax with PostCSS-cssnext, and be able to decide whether it is something you wish to use in an upcoming (or existing) project!

在今年早些时候，由SitePoint发布的“ 7个CSS插件以使您轻松进入PostCSS”中出现了有关**PostCSS-cssnext的**讨论。 PostCSS-cssnext是用于编写下一代CSS的插件包。 本文提供了对项目历史及其收益的深入了解。 一旦对PostCSS-cssnext有了更深入的了解，我们将跳入一些示例供您使用。 到本文结尾，您将对PostCSS-cssnext的将来CSS语法有所了解，并能够确定它是否是您希望在即将到来的(或现有的)项目中使用的东西！

## 对下一代CSS的需求 **(**The Need for Next Generation CSS**)** ##

Regardless of the language, developers are always after the latest features. Whereas tools like [Babel][] provide JavaScript developers with support for future ECMAScript features, PostCSS-cssnext provides web designers with future CSS features. Currently, this means offering support for CSS4-related features, such as [CSS variables][], nesting, and more! Now, before we go any further, I would like to point out the fact that future CSS features can be subject to change, and the CSS4 spec is no different in this regard. Nonetheless, PostCSS-cssnext alleviates the negative impact this may have on a project by informing users in advance of any changes that are about to occur.

不管使用哪种语言，开发人员始终追求最新功能。 [Babel之类的][Babel]工具为JavaScript开发人员提供了对未来ECMAScript功能的支持，而PostCSS-cssnext为Web设计人员提供了未来CSS功能。 当前，这意味着要提供与CSS4相关的功能的支持，例如[CSS变量][CSS variables] ，嵌套等！ 现在，在进一步介绍之前，我想指出一个事实，即将来CSS功能可能会发生变化，并且CSS4规范在这方面没有什么不同。 尽管如此，PostCSS-cssnext通过提前通知用户即将发生的任何更改来减轻对项目可能产生的负面影响。

![postcss homepage screenshot - features][]

## 从cssnext到`PostCSS-cssnext` **(**From cssnext to `PostCSS-cssnext`**)** ##

Initially, “cssnext” was meant to perform such tasks as minifying code and displaying error messages. These capabilities were helpful, however they did not support future CSS features, which is the ultimate goal of the PostCSS-cssnext project. As a consequence, the cssnext team decided to abandon the idea of cssnext as a standalone tool on the grounds that the time spent supporting it could be better spent on supporting future CSS syntax and any of its subsequent changes. For additional CSS-related processes, developers can integrate PostCSS-cssnext with other technologies like [cssnano][] for code minification and [postcss-browser-reporter][] for error reporting.

最初，“ cssnext”旨在执行诸如减少代码和显示错误消息之类的任务。 这些功能很有帮助，但是它们不支持将来CSS功能，这是PostCSS-cssnext项目的最终目标。 结果，cssnext团队决定放弃cssnext作为独立工具的想法，理由是花费在支持它上的时间可能会更好地花费在支持将来CSS语法及其任何后续更改上。 有关更多CSS相关的流程，开发人员可以整合PostCSS-cssnext与其他技术，如[cssnano][]代码缩小和[postcss浏览器，记者][postcss-browser-reporter]错误报告。

## 剖析PostCSS-cssnext **(**Dissecting PostCSS-cssnext**)** ##

If we delve into the [PostCSS-cssnext repository on GitHub][], we can see just how modular this plug-in is. Inside the [src/features.js][src_features.js] file, we’ll see that the code for each future CSS feature is enclosed within its own module named in accordance with the relevant CSS specification.

如果我们深入研究[GitHub上][PostCSS-cssnext repository on GitHub]的[PostCSS-cssnext存储库][PostCSS-cssnext repository on GitHub] ，我们可以看到该插件的模块化程度。 在[src / features.js][src_features.js]文件中，我们将看到每个将来CSS功能的代码都包含在根据相关CSS规范命名的其自己的模块中。

// https://npmjs.com/package/postcss-custom-properties
    customProperties: (options) => require("postcss-custom-properties")(options),
    
    // https://npmjs.com/package/postcss-apply
    applyRule: (options) => require("postcss-apply")(options),
    
    // https://npmjs.com/package/postcss-calc
    calc: (options) => require("postcss-calc")(options),

Because it’s a plug-in pack, PostCSS-cssnext is bundled with PostCSS plug-ins. This means that we could install these features individually if we so choose, although using PostCSS-cssnext means we don’t have to! For example, if we only wanted to use [CSS custom properties][CSS variables], we could install it via `npm` like this:

因为是一个插件包，所以PostCSS-cssnext与PostCSS插件捆绑在一起。 这意味着我们可以根据需要选择单独安装这些功能，尽管使用PostCSS-cssnext意味着我们不必这样做！ 例如，如果我们只想使用[CSS自定义属性][CSS variables] ，则可以通过`npm`安装，如下所示：

npm install postcss-custom-properties --save-dev

For a full list of all the CSS features PostCSS-cssnext supports, head over to the [dedicated features page][] on the PostCSS-cssnext website.

有关PostCSS-cssnext支持的所有CSS功能的完整列表，请转至PostCSS-cssnext网站上的[专用功能页面][dedicated features page] 。

We should also note that PostCSS-cssnext comes bundled with [autoprefixer][] and [pixrem][]. Don’t worry if you’re unfamiliar with these tools. They are post-processors for creating cross-browser compatible CSS, and we are going to find out how they work soon.

我们还应该注意，PostCSS-cssnext与[autoprefixer][]和[pixrem][]捆绑在一起。 如果您不熟悉这些工具，请不要担心。 它们是用于创建跨浏览器兼容CSS的后处理器，我们将很快了解它们的工作原理。

## 看看PostCSS-cssnext示例 **(**A Look into PostCSS-cssnext Examples**)** ##

Now that we’ve taken a detailed look at PostCSS, let’s dive into some examples!

现在，我们已经对PostCSS进行了详细研究，让我们深入研究一些示例！

### 将自定义属性与`var()` **(**Using Custom Properties With `var()`**)** ###

Custom properties are among the most popular CSS features. It’s important to note that **all custom properties are limited to the `:root` selector**.

自定义属性是最受欢迎CSS功能之一。 重要的是要注意， **所有自定义属性都限于`:root`选择器** 。

:root {
      --fontSize: 2em;
    }

Once defined, we can then use `var()` inside of our CSS. In addition to the `root` selector, we should direct our attention to the use of dashes, `--` when naming custom properties. This ensures our code aligns with the [w3c spec][CSS variables].

定义后，我们便可以在CSS内使用`var()` 。 除了`root`选择，我们应该把我们的注意使用破折号， `--`命名自定义属性时。 这样可以确保我们的代码符合[w3c规范][CSS variables] 。

See the Pen [postcss-cssnext custom properties ][postcss-cssnext custom properties] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [postcss-cssnext自定义属性][postcss-cssnext custom properties] 。

### 通过`@apply`使用自定义属性 **(**Using Custom Properties With `@apply`**)** ###

With `@apply`, we can take custom properties with `var()` a step further and reference sets of data. These are helpful in situations when you want to re-use a group of styles without having to write them over and over again! In our example, we see how we can take advantage of this feature when creating a layout.

使用`@apply` ，我们可以进一步使用`var()`的自定义属性并引用数据集。 当您要重复使用一组样式而不必一遍又一遍地编写样式时，这些方法很有用！ 在我们的示例中，我们看到了在创建布局时如何利用此功能。

:root {
      --flex-row: {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-around;
      }
    }
    .flex-row {
      @apply --flex-row;
    }

The above CSS rules inside the `:root` selector define a flex container. If we want to modify this layout, all we need to do is modify a single value inside of `--flex-row` and the change will take effect wherever `--flex-row` is used in conjunction with `@apply`.

`:root`选择器中的上述CSS规则定义了一个flex容器。 如果要修改此布局，我们要做的就是修改`--flex-row`内的单个值，并且将`--flex-row`与`@apply`结合使用时，更改将生效。

#### 关于我们代码的快速说明 **(**Quick Note on Our Code**)** ####

Although I haven’t directly mentioned the use of **nesting**, we saw it being used in the example above (the `--flex-row` property is nested inside of the `:root` selector). For those completely new to the concept of nesting, you can read more about it in the [CSS Nesting Module Level 3][] documentation. As its name suggests, nesting allows us to **nest CSS rules within other CSS rules**. Without taking it too far, it’s a really practical feature, so I suggest checking it out!

尽管我没有直接提到**嵌套**的使用，但我们在上面的示例中看到了**嵌套**的使用( `--flex-row`属性嵌套在`:root`选择器内部)。 对于完全不了解嵌套概念的人员，您可以在[CSS嵌套模块3级][CSS Nesting Module Level 3]文档中阅读有关[嵌套的][CSS Nesting Module Level 3]更多信息。 顾名思义，嵌套使我们可以将**CSS规则嵌套在其他CSS规则中** 。 不用花太多时间，它是一个非常实用的功能，因此我建议您检查一下！

Another cool thing that we might not have realized is that all of our code is cross-browser compatible! As we learned before, cssnext comes with **autoprefixer**, which automatically adds all the vendor prefixes to the compiled CSS code.

我们可能尚未意识到的另一件很酷的事情是，我们所有的代码都是跨浏览器兼容的！ 如前所述，cssnext带有**autoprefixer** ，它将自动将所有供应商前缀添加到已编译CSS代码中。

### 计算表达式 **(**Calculating Expressions**)** ###

We’ve already taken a look at the `var()` function. Now, let’s learn how we can use custom properties with `var` in conjunction with the `calc` function. In our example, we will use `calc()` to calculate font-sizes for our headings.

我们已经看过`var()`函数。 现在，让我们学习如何将自定义属性与`var`以及`calc`函数结合使用。 在我们的示例中，我们将使用`calc()`计算标题的字体大小。

:root {
      --fontSize: 1rem;
    }
    h1 {
      font-size: calc(var(--fontSize) * 3);
    }
    h2 {
      font-size: calc(var(--fontSize) * 2.75);
    }
    h3 {
      font-size: calc(var(--fontSize) * 2.25);
    }
    h4 {
      font-size: calc(var(--fontSize) * 2);
    }

Here, we see our `--fontSize` variable being passed into `calc()` to multiply its value. In addition to multiplication, `calc()` **can also be used to perform division, subtraction, and addition.**

在这里，我们看到`--fontSize`变量被传递到`calc()`以乘以它的值。 除乘法外， `calc()` **也可用于执行除法，减法和加法。**

See the Pen [calc function][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [calc函数][calc function] 。

### 皮克斯雷姆的隐藏力量 **(**The Hidden Powers of Pixrem**)** ###

A moment ago, we mentioned the effect autoprefixer had on our code. In addition to adding vendor prefixes, the PostCSS-cssnext plug-in pack will also generate fallback pixel values for [`rem` units][rem_ units] with the help of **pixrem**. It does this for browsers where `rem` is not supported, and if we analyze our compiled CSS in the above demo, we’ll see that our headings have now both a `px` and `rem` value, further ensuring cross-browser compatibility.

刚才，我们提到了autoprefixer对代码的影响。 除了添加供应商前缀之外，PostCSS-cssnext插件包还将在**pixrem**的帮助下为[`rem`单元][rem_ units]生成后备像素值。 这样做是针对不支持`rem`浏览器执行的，如果我们在上面的演示中分析编译CSS，我们将看到标题现在既具有`px`也具有`rem`值，从而进一步确保了跨浏览器的兼容性。

h1 {
      font-size: 48px;
      font-size: 3rem;
    }
    h2 {
      font-size: 44px;
      font-size: 2.75rem;
    }
    h3 {
      font-size: 36px;
      font-size: 2.25rem;
    }
    h4 {
      font-size: 32px;
      font-size: 2rem;
    }

### 自定义媒体查询 **(**Custom Media Queries**)** ###

[Mobile web usage is huge][], which means that responsive design is more crucial than ever. If you were not already aware, there are a number of planned changes to simplify the process of building media queries.

[移动Web的使用量巨大][Mobile web usage is huge] ，这意味着响应式设计比以往任何时候都更为关键。 如果您还不知道，可以进行一些计划内的更改以简化构建媒体查询的过程。

@custom-media --small-viewport (max-width: 600px);
     @media (--small-viewport) {
       /* styles for small viewport */
      .danger {
        flex-direction: column;
        background-color: rebeccapurple; 
      }
     }

In our first media query, we see **`@custom-media` being used to create a custom media query**. Once this is done, we can then pass the name of our media query into the [`@media()` rule][media_ rule] to establish our breakpoint. Now, we can see our items change from row to column and the background color change from orange to Rebecca purple as our viewport gets smaller (from 600px and below).

在第一个媒体查询中，我们看到**`@custom-media`用于创建自定义媒体查询** 。 完成此操作后，我们可以将媒体查询的名称传递到[`@media()`规则中，][media_ rule]以建立断点。 现在，随着视口变小(从600px及以下)，我们可以看到项目从行变为列，背景颜色从橙色变为丽贝卡紫色。

See the Pen [postcss-cssnext custom media queries][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[postcss-cssnext定制媒体查询][postcss-cssnext custom media queries]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

### 媒体查询范围 **(**Media Query Ranges**)** ###

While writing media queries, PostCSS-cssnext allows us to be more concise with our code by letting us define **media query ranges**. This means that we can replace `max`, `min`, and `equal` values with the `>`,`<` and `=` operators. Although minor, these symbols allow for faster development and make code easier to read.

在编写媒体查询时，PostCSS-cssnext允许我们定义**媒体查询范围** ，从而使我们的代码更加简洁。 这意味着我们可以用`>` ， `<`和`=`运算符替换`max` ， `min`和`equal`值。 这些符号虽然很小，但可以加快开发速度，并使代码更易于阅读。

@custom-media --medium-viewport (width >= 600px) and (width <= 1280px);
    
    @media (--medium-viewport) {
      .danger {
        display: flex;
        justify-content: space-around;
        padding: 1rem;
        background: teal;
      }
    }

In the snippet above is the code for the `--medium-viewport` media query. If we resize the viewport to be smaller than 600px, then the media query for small screens from the previous example will take effect, i.e., `flex-direction` will be set to `column` and the background color will be Rebecca purple. When the page is displayed on screens wider than or equal to 600px all the way up to screens 1280px wide, the `flex-direction` property will revert to its default `row` value and the background color will be teal. Once the viewport width exceeds 1280px, the background color will revert back to orange.

上面的代码段是`--medium-viewport`媒体查询的代码。 如果我们将视口的大小调整为小于600像素，则上一个示例中对小屏幕的媒体查询将生效，即， `flex-direction`将设置为`column` ，背景颜色将为Rebecca purple。 当页面在宽度大于或等于600像素的屏幕上显示直至宽度1280像素的屏幕时， `flex-direction`属性将恢复为其默认`row`值，并且背景颜色为深绿色。 视口宽度超过1280像素后，背景色将恢复为橙色。

See the Pen [postcss-cssnext media query ranges][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

见笔[postcss-cssnext媒体查询范围][postcss-cssnext media query ranges]由SitePoint( [@SitePoint][SitePoint]上) [CodePen][] 。

## 结论 **(**Conclusion**)** ##

We just covered a lot of ground and gained a lot of knowledge about PostCSS-cssnext. So, what do you think? Do you find PostCSS-cssnext helpful? Hopefully, you’ve come away from this article with insight about the tool and its ability to bring future CSS features into today’s world. For those interested in playing around with PostCSS-cssnext, I’ve created this [starter-kit with Gulp][].

我们仅介绍了很多基础知识，并获得了许多有关PostCSS-cssnext的知识。 所以你怎么看？ 您觉得PostCSS-cssnext有用吗？ 希望您对本文有所了解，并对该工具及其将未来CSS功能带入当今世界的能力有所了解。 对于那些有兴趣使用PostCSS-cssnext的人，我已经[用Gulp][starter-kit with Gulp]创建了这个[入门工具包][starter-kit with Gulp] 。

> 翻译自: [https://www.sitepoint.com/future-css-with-postcss-cssnext/][https_www.sitepoint.com_future-css-with-postcss-cssnext]

css入门

[PostCSS-cssnext]: /images/20221123/b6df7e3fb898408ba49aaa4e9bc1e22e.png
[AtoZ_ CSS]: https://www.sitepoint.com/premium/courses/atoz-css-2944
[cssnext Logo]: /images/20221123/77a240ebc81b4a4e9e1e7f73b63fe6e4.png
[Babel]: https://babeljs.io/
[CSS variables]: https://drafts.csswg.org/css-variables/
[postcss homepage screenshot - features]: /images/20221123/6dd540a25e7f4682afc400b802349558.png
[cssnano]: http://cssnano.co/
[postcss-browser-reporter]: https://github.com/postcss/postcss-browser-reporter
[PostCSS-cssnext repository on GitHub]: https://github.com/MoOx/postcss-cssnext
[src_features.js]: https://github.com/MoOx/postcss-cssnext/blob/master/src/features.js
[dedicated features page]: http://cssnext.io/features/
[autoprefixer]: https://github.com/postcss/autoprefixer
[pixrem]: https://github.com/robwierzbowski/node-pixrem
[postcss-cssnext custom properties]: http://codepen.io/SitePoint/pen/edqmbE/
[SitePoint]: http://codepen.io/SitePoint
[CodePen]: http://codepen.io
[CSS Nesting Module Level 3]: https://tabatkins.github.io/specs/css-nesting/
[calc function]: http://codepen.io/SitePoint/pen/ozKXLV/
[rem_ units]: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
[Mobile web usage is huge]: http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
[media_ rule]: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
[postcss-cssnext custom media queries]: http://codepen.io/SitePoint/pen/dpxovB/
[postcss-cssnext media query ranges]: http://codepen.io/SitePoint/pen/JRgdpV/
[starter-kit with Gulp]: https://github.com/sitepoint-editors/sp-postcss-fin
[https_www.sitepoint.com_future-css-with-postcss-cssnext]: https://www.sitepoint.com/future-css-with-postcss-cssnext/