PostCSS和cssnext的知识点有哪些

本文小编为大家详细介绍“PostCSS和cssnext的知识点有哪些”，内容详细，步骤清晰，细节处理妥当，希望这篇“PostCSS和cssnext的知识点有哪些”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

PostCSS 是使用 javascript 插件转换 CSS 的后处理器。PostCSS 本身不会对你的 CSS 做任何事情，你需要安装一些 plugins 才能开始工作。这不仅使其模块化，同时功能加强。

cssnext 是一个 CSS transpiler，允许你使用最新的 CSS 语法。cssnext 把新 CSS 规范转换成兼容性更强的 CSS，所以不需要等待各种浏览器的支持。

PostCSS 的工作原理就是解析 CSS 并将其转换成一个 CSS 的节点数，这可以通过 javascript 来控制，然后返回修改后的树并保存。它与 Sass（预处理器）的工作原理不同，你基本上是用一种不同的语言来编译 CSS。

预处理和后处理的区别

为了简单的方式解释预处理和后处理的不同，这里以单位转换为例。当书写 Sass 时，我们可以用函数px转换成rem：

.selector { margin-bottom: rem(20px); }

.selector { margin-bottom: 1.25rem; }

这种方式节省了我们手工计算的时间。不过通过 PostCSS，我们能够做的更好。因为是后处理的缘故，我们不需要任何函数来编译 CSS。我们可以直接书写px，它可以自动地转换成rem。

.selector { margin-bottom: 20px; }

.selector { margin-bottom: 1.25rem; }

PostCSS 会在每一个px值出现并运行计算之前处理声明，将其转换成rem的值。

cssnext 新特性

cssnext 包含了大量的新特性：

• 自动提供浏览器前缀支持

• 自定义属性与 var() 支持

• 自定义属性集合与 @apply 支持

• 简化的、更安全的 calc()

• 可自定义的媒体查询

• 媒体查询范围

• 自定义选择器

• 嵌套

• image-set()

• color()

• hwb()

• gray()

• rrggbbaa 颜色

• rgba() 的降级方案

• rebeccapurple 颜色

• font-variant 属性

• filter 属性

• inital 值

• rem 单位的降级方案

• :any-link 伪类

• :mathces 伪类

• :not 伪类

• :: 伪元素语法的降级方案

• overflow-wrap 属性的降级方案

• 不区分大小写的属性

• 功能增强的 rga()

• 功能增强的 hsl()

• sysem-ui 字体

自动提供浏览器前缀支持

自动添加（以及删除过时/没用的前缀），由 autoprefixer 实现

自定义属性与 var() 支持

自定义属性的当前转换旨在提供一种限定在:root选择器中、面向未来的、由原生 CSS 自定义属性提供的新特性。

使用特性：

:root {

--mainColor: red;

}

a {

color: var(--mainColor);

}

自定义属性集合与 @apply 支持

允许你在已命名的自定义属性中存储一套变量，然后在其他类型规则中引用它。

:root {

--danger-theme: {

color: white;

background-color: red;

};

}

.danger {

@apply --danger-theme;

}

简化的、更安全的 calc()

使用优化预分析 var() 引用来允许你更安全的用 calc() 使用自定义变量

:root {

--fontSize: 1rem;

}

h2 {

font-size: calc(var(--fontSize) * 2);

}

可自定义的媒体查询

一个更好的方法来实现语义化的媒体查询

@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {

}

媒体查询范围

允许用 <= 和 >=来取代min和max

@media (width >= 500px) and (width <= 1200px) {

}

@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);

@media (--only-medium-screen) {

}

自定义选择器

允许你创造自己的选择器

@custom-selector :--button button, .button;

@custom-selector :--enter :hover, :focus;

:--button {

}

:--button:--enter {

}

嵌套

允许你使用嵌套选择器

a {

& span {

color: white;

}

@nest span & {

color: blue;

}

@media (min-width: 30em) {

color: yellow;

}

}

image-set() 函数

允许你根据不同的用户设备来提供不同的图片解决方案

.foo {

background-image: image-set(url(img/test.png) 1x,

url(img/test-2x.png) 2x,

url(my-img-print.png) 600dpi);

}

color() 函数

一个颜色函数来修改颜色

a {

color: color(red alpha(-10%));

}

a:hover {

color: color(red blackness(80%));

}

hwb() 函数

与 hs1() 相似，不过更容易阅读

body {

color: hwb(90, 0%, 0%, 0.5);

}

gray() 函数

允许你使用超过50种渐变的灰度值，对于第一个参数，你可以使用 0 - 255 的数值或者百分比。

.foo {

color: gray(85);

}

.bar {

color: gray(10%, 50%);

}

rrggbbaa 颜色值

允许使用4位或者8位十六进制数来表示颜色

body {

background: #9d9c;

}

rgba() 的降级方案

如果你使用的是旧的浏览器（比如 IE8），那么把 rgba() 转换为实体颜色

body {

background: rgba(153, 221, 153, 0.8);

}

rebeccapurple 颜色

允许你使用新的颜色关键词

body {

background: rgba(153, 221, 153, 0.8);

}

font-variant 属性

通过 font-feature-settings降级的一种属性。你可以通过这个链接来查看浏览器支持

h3 {

font-variant-caps: small-caps;

}

table {

font-variant-numeric: lining-nums;

}

filter 属性

W3C 的 filters 只允许使用url(data:*)来转换 svg filter。

.blur {

filter: blur(4px);

}

inital 值

允许你使用如何值的初始值。该值表示属性初始化值所指定的值，但这并不意味着浏览器的默认值。

比如，对于display属性，initial 时钟标示内联，因为这是属性指定的初始值。一个例子，div { display: initial }并不代表block，而是inline。

div {

display: initial;

}

rem 单位

在旧浏览器里将 rem 降级为 px（比如IE8）

h2 {

font-size: 1.5rem;

}

:any-link 伪类

允许你使用:any-link伪类

nav :any-link {

background-color: yellow;

}

:matches 伪类

允许你使用:matches伪类

p:matches(:first-child, .special) {

color: red;

}

:not 伪类

允许你使用支持最多选择器的:not伪类，将此降级为只选择一个选择器的:not

p:not(:first-child, .special) {

color: red;

}

:: 伪元素语法降级

如果你的浏览器是旧浏览器，会将 :: 降级为:。

a::before {

}

overflow-wrap 属性

将overflow-wrap转换为Word-wrap属性

body {

overflow-wrap: break-word;

}

不区分大小写的属性

允许你使用不区分大小写的属性

[frame=hsides i] {

border-style: solid none;

}

功能增强的 rga()

允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。

你也可以使用数字来表示颜色通道。

alpha 值接受百分比和数字，并且将 rgb() 作为可选参数。因此 rgb() 和 rgba() 现在是彼此的别名。

div {

background-color: rgb(100 222.2 100.9 / 30%);

}

功能增强的 hs1()

允许你使用由空格分割的参数与可选的由斜线分割的不透明度新语法。

hsl() 现在接受角度（deg, grad, rad, turn）以及用数字表示色调，用百分比或者数字来表示 alpha 值。所以 hsl() 与 hsla() 现在也是彼此的别名。

div {

color: hsl(90deg 90% 70%);

background-color: hsl(300grad 25% 15% / 70%);

}

system-ui 字体

允许你使用 system-ui 通用字体系列。当前转换提供了一个实际的字体列表来作为降级方案。

body {

font-family: system-ui;

}

使用 cssnext 书写未来的 CSS

cssnext 是一个 PostCSS 的包，我们可以在样式表中利用 cssnext 额外增加一些 CSS 规范。

:root {

--heading-color: #ff0000;

}

@custom-selector :--headings h2, h3, h4, h5, h6, h7;

:--headings {

color: var(--heading-color);

}

通过 cssnext，上述代码会被处理成以下内容

h2,

h3,

h4,

h5,

h6,

h7 {

color: #ff0000;

}

这真的很简洁，其中还有很多令人兴奋的特性。因为我们书写的是未来规范的 CSS，所以 PostCSS 的生成步骤不需要浏览器去执行。

用自定义函数扩展 CSS 的功能

使用 cssnext，我们可以通过 javascript 创建自定义函数来操作被解析的 CSS。在 Sass 中，我们经常使用生成行距的函数（根据基本的 line-height 计算），它有助于创建简单且可维护的垂直韵律。

$line-height: 32px;

@function vr($amount) {

@return $line-height * $amount;

}

.selector { margin-bottom: vr(2) }

.selector { margin-bottom: 64px; }

如果用 PostCSS 做的话，我们可以自定义 CSS 组件而不是函数。

.selector { margin-bottom: 2vr }

.selector { margin-bottom: 64px; }

读到这里，这篇“PostCSS和cssnext的知识点有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注编程网html频道。