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：
/* input */
.selector { margin-bottom: rem(20px); }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }
这种方式节省了我们手工计算的时间。不过通过 PostCSS，我们能够做的更好。因为是后处理的缘故，我们不需要任何函数来编译 CSS。我们可以直接书写px，它可以自动地转换成rem。
/* input */
.selector { margin-bottom: 20px; }
/* output, assuming base font size is 1rem */
.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);
/* check out media queries ranges for a better syntax !*/
@media (--small-viewport) {
/* styles for small viewport */
}
媒体查询范围
允许用 <= 和 >=来取代min和max
@media (width >= 500px) and (width <= 1200px) {
/* your styles */
}
/* or coupled with custom media queries */
@custom-media --only-medium-screen (width >= 500px) and (width <= 1200px);
@media (--only-medium-screen) {
/* your styles */
}
自定义选择器
允许你创造自己的选择器
@custom-selector :--button button, .button;
@custom-selector :--enter :hover, :focus;
:--button {
/* styles for your buttons */
}
:--button:--enter {
/*
hover/focus styles for your button
Read more about :enter proposal
http://discourse.specifiction.org/t/a-common-pseudo-class-for-hover-and-focus/877
*/
}
嵌套
允许你使用嵌套选择器
a {
/* direct nesting (& MUST be the first part of selector)*/
& span {
color: white;
}
/* @nest rule (for complex nesting) */
@nest span & {
color: blue;
}
/* media query automatic nesting */
@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);
/* you will have the same value without alpha as a fallback */
}
rebeccapurple 颜色
允许你使用新的颜色关键词
body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}
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; /* inline */
}
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 规范。
/* custom properties */
:root {
--heading-color: #ff0000;
}
/* custom selectors */
@custom-selector :--headings h2, h3, h4, h5, h6, h7;
/* usage */
:--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;
/* vertical rhythm function */
@function vr($amount) {
@return $line-height * $amount;
}
/* input */
.selector { margin-bottom: vr(2) }
/* output */
.selector { margin-bottom: 64px; }
如果用 PostCSS 做的话，我们可以自定义 CSS 组件而不是函数。
/* input */
.selector { margin-bottom: 2vr }
/* output */
.selector { margin-bottom: 64px; }
读到这里，这篇“PostCSS和cssnext的知识点有哪些”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注创新互联行业资讯频道。
当前题目：PostCSS和cssnext的知识点有哪些
文章URL：http://6mz.cn/article/gceicj.html