PostCSS和cssnext的知識(shí)點(diǎn)有哪些

發(fā)布時(shí)間：2022-03-10 14:56:33 來(lái)源：億速云閱讀：129 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“PostCSS和cssnext的知識(shí)點(diǎn)有哪些”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“PostCSS和cssnext的知識(shí)點(diǎn)有哪些”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

PostCSS 是使用 javascript 插件轉(zhuǎn)換 CSS 的后處理器。PostCSS 本身不會(huì)對(duì)你的 CSS 做任何事情，你需要安裝一些 plugins 才能開(kāi)始工作。這不僅使其模塊化，同時(shí)功能加強(qiáng)。

cssnext 是一個(gè) CSS transpiler，允許你使用最新的 CSS 語(yǔ)法。cssnext 把新 CSS 規(guī)范轉(zhuǎn)換成兼容性更強(qiáng)的 CSS，所以不需要等待各種瀏覽器的支持。

PostCSS 的工作原理就是解析 CSS 并將其轉(zhuǎn)換成一個(gè) CSS 的節(jié)點(diǎn)數(shù)，這可以通過(guò) javascript 來(lái)控制，然后返回修改后的樹(shù)并保存。它與 Sass（預(yù)處理器）的工作原理不同，你基本上是用一種不同的語(yǔ)言來(lái)編譯 CSS。

預(yù)處理和后處理的區(qū)別

為了簡(jiǎn)單的方式解釋預(yù)處理和后處理的不同，這里以單位轉(zhuǎn)換為例。當(dāng)書(shū)寫(xiě) Sass 時(shí)，我們可以用函數(shù)px轉(zhuǎn)換成rem：

/* input */
.selector { margin-bottom: rem(20px); }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }

這種方式節(jié)省了我們手工計(jì)算的時(shí)間。不過(guò)通過(guò) PostCSS，我們能夠做的更好。因?yàn)槭呛筇幚淼木壒剩覀儾恍枰魏魏瘮?shù)來(lái)編譯 CSS。我們可以直接書(shū)寫(xiě)px，它可以自動(dòng)地轉(zhuǎn)換成rem。

/* input */
.selector { margin-bottom: 20px; }
/* output, assuming base font size is 1rem */
.selector { margin-bottom: 1.25rem; }

PostCSS 會(huì)在每一個(gè)px值出現(xiàn)并運(yùn)行計(jì)算之前處理聲明，將其轉(zhuǎn)換成rem的值。

cssnext 新特性

cssnext 包含了大量的新特性：

自動(dòng)提供瀏覽器前綴支持
自定義屬性與 var() 支持
自定義屬性集合與 @apply 支持
簡(jiǎn)化的、更安全的 calc()
可自定義的媒體查詢
媒體查詢范圍
自定義選擇器
嵌套
image-set()
color()
hwb()
gray()
rrggbbaa 顏色
rgba() 的降級(jí)方案
rebeccapurple 顏色
font-variant 屬性
filter 屬性
inital 值
rem 單位的降級(jí)方案
:any-link 偽類
:mathces 偽類
:not 偽類
:: 偽元素語(yǔ)法的降級(jí)方案
overflow-wrap 屬性的降級(jí)方案
不區(qū)分大小寫(xiě)的屬性
功能增強(qiáng)的 rga()
功能增強(qiáng)的 hsl()
sysem-ui 字體

自動(dòng)提供瀏覽器前綴支持

自動(dòng)添加（以及刪除過(guò)時(shí)/沒(méi)用的前綴），由 autoprefixer 實(shí)現(xiàn)

自定義屬性與 var() 支持

自定義屬性的當(dāng)前轉(zhuǎn)換旨在提供一種限定在:root選擇器中、面向未來(lái)的、由原生 CSS 自定義屬性提供的新特性。

使用特性：

:root {
--mainColor: red;
}
a {
color: var(--mainColor);
}

自定義屬性集合與 @apply 支持

允許你在已命名的自定義屬性中存儲(chǔ)一套變量，然后在其他類型規(guī)則中引用它。

:root {
--danger-theme: {
color: white;
background-color: red;
};
}
.danger {
@apply --danger-theme;
}

簡(jiǎn)化的、更安全的 calc()

使用優(yōu)化預(yù)分析 var() 引用來(lái)允許你更安全的用 calc() 使用自定義變量

:root {
--fontSize: 1rem;
}
h2 {
font-size: calc(var(--fontSize) * 2);
}

可自定義的媒體查詢

一個(gè)更好的方法來(lái)實(shí)現(xiàn)語(yǔ)義化的媒體查詢

@custom-media --small-viewport (max-width: 30em);
/* check out media queries ranges for a better syntax !*/
@media (--small-viewport) {
/* styles for small viewport */
}

媒體查詢范圍

允許用 <= 和 >=來(lái)取代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 */
}

自定義選擇器

允許你創(chuàng)造自己的選擇器

@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() 函數(shù)

允許你根據(jù)不同的用戶設(shè)備來(lái)提供不同的圖片解決方案

.foo {
background-image: image-set(url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi);
}

color() 函數(shù)

一個(gè)顏色函數(shù)來(lái)修改顏色

a {
color: color(red alpha(-10%));
}
a:hover {
color: color(red blackness(80%));
}

hwb() 函數(shù)

與 hs1() 相似，不過(guò)更容易閱讀

body {
color: hwb(90, 0%, 0%, 0.5);
}

gray() 函數(shù)

允許你使用超過(guò)50種漸變的灰度值，對(duì)于第一個(gè)參數(shù)，你可以使用 0 - 255 的數(shù)值或者百分比。

.foo {
color: gray(85);
}
.bar {
color: gray(10%, 50%);
}

rrggbbaa 顏色值

允許使用4位或者8位十六進(jìn)制數(shù)來(lái)表示顏色

body {
background: #9d9c;
}

rgba() 的降級(jí)方案

如果你使用的是舊的瀏覽器（比如 IE8），那么把 rgba() 轉(zhuǎn)換為實(shí)體顏色

body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}

rebeccapurple 顏色

允許你使用新的顏色關(guān)鍵詞

body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}

font-variant 屬性

通過(guò) font-feature-settings降級(jí)的一種屬性。你可以通過(guò)這個(gè)鏈接來(lái)查看瀏覽器支持

h3 {
font-variant-caps: small-caps;
}
table {
font-variant-numeric: lining-nums;
}

filter 屬性

W3C 的 filters 只允許使用url(data:*)來(lái)轉(zhuǎn)換 svg filter。

.blur {
filter: blur(4px);
}

inital 值

允許你使用如何值的初始值。該值表示屬性初始化值所指定的值，但這并不意味著瀏覽器的默認(rèn)值。

比如，對(duì)于display屬性，initial 時(shí)鐘標(biāo)示內(nèi)聯(lián)，因?yàn)檫@是屬性指定的初始值。一個(gè)例子，div { display: initial }并不代表block，而是inline。

div {
display: initial; /* inline */
}

rem 單位

在舊瀏覽器里將 rem 降級(jí)為 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偽類，將此降級(jí)為只選擇一個(gè)選擇器的:not

p:not(:first-child, .special) {
color: red;
}

:: 偽元素語(yǔ)法降級(jí)

如果你的瀏覽器是舊瀏覽器，會(huì)將 :: 降級(jí)為:。

a::before {
/* ... */
}

overflow-wrap 屬性

將overflow-wrap轉(zhuǎn)換為word-wrap屬性

body {
overflow-wrap: break-word;
}

不區(qū)分大小寫(xiě)的屬性

允許你使用不區(qū)分大小寫(xiě)的屬性

[frame=hsides i] {
border-style: solid none;
}

功能增強(qiáng)的 rga()

允許你使用由空格分割的參數(shù)與可選的由斜線分割的不透明度新語(yǔ)法。

你也可以使用數(shù)字來(lái)表示顏色通道。

alpha 值接受百分比和數(shù)字，并且將 rgb() 作為可選參數(shù)。因此 rgb() 和 rgba() 現(xiàn)在是彼此的別名。

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

功能增強(qiáng)的 hs1()

允許你使用由空格分割的參數(shù)與可選的由斜線分割的不透明度新語(yǔ)法。

hsl() 現(xiàn)在接受角度（deg, grad, rad, turn）以及用數(shù)字表示色調(diào)，用百分比或者數(shù)字來(lái)表示 alpha 值。所以 hsl() 與 hsla() 現(xiàn)在也是彼此的別名。

div {
color: hsl(90deg 90% 70%);
background-color: hsl(300grad 25% 15% / 70%);
}

system-ui 字體

允許你使用 system-ui 通用字體系列。當(dāng)前轉(zhuǎn)換提供了一個(gè)實(shí)際的字體列表來(lái)作為降級(jí)方案。

body {
font-family: system-ui;
}

使用 cssnext 書(shū)寫(xiě)未來(lái)的 CSS

cssnext 是一個(gè) PostCSS 的包，我們可以在樣式表中利用 cssnext 額外增加一些 CSS 規(guī)范。

/* custom properties */
:root {
--heading-color: #ff0000;
}
/* custom selectors */
@custom-selector :--headings h2, h3, h4, h5, h6, h7;
/* usage */
:--headings {
color: var(--heading-color);
}

通過(guò) cssnext，上述代碼會(huì)被處理成以下內(nèi)容

h2,
h3,
h4,
h5,
h6,
h7 {
color: #ff0000;
}

這真的很簡(jiǎn)潔，其中還有很多令人興奮的特性。因?yàn)槲覀儠?shū)寫(xiě)的是未來(lái)規(guī)范的 CSS，所以 PostCSS 的生成步驟不需要瀏覽器去執(zhí)行。

用自定義函數(shù)擴(kuò)展 CSS 的功能

使用 cssnext，我們可以通過(guò) javascript 創(chuàng)建自定義函數(shù)來(lái)操作被解析的 CSS。在 Sass 中，我們經(jīng)常使用生成行距的函數(shù)（根據(jù)基本的 line-height 計(jì)算），它有助于創(chuàng)建簡(jiǎn)單且可維護(hù)的垂直韻律。

$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 組件而不是函數(shù)。

/* input */
.selector { margin-bottom: 2vr }
/* output */
.selector { margin-bottom: 64px; }

讀到這里，這篇“PostCSS和cssnext的知識(shí)點(diǎn)有哪些”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)