溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“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 包含了大量的新特性：
自動提供瀏覽器前綴支持
自定義屬性與 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 實現
自定義屬性的當前轉換旨在提供一種限定在:root選擇器中、面向未來的、由原生 CSS 自定義屬性提供的新特性。
使用特性：
:root {
--mainColor: red;
}
a {
color: var(--mainColor);
}
允許你在已命名的自定義屬性中存儲一套變量，然后在其他類型規則中引用它。
:root {
--danger-theme: {
color: white;
background-color: red;
};
}
.danger {
@apply --danger-theme;
}
使用優化預分析 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;
}
}
允許你根據不同的用戶設備來提供不同的圖片解決方案
.foo {
background-image: image-set(url(img/test.png) 1x,
url(img/test-2x.png) 2x,
url(my-img-print.png) 600dpi);
}
一個顏色函數來修改顏色
a {
color: color(red alpha(-10%));
}
a:hover {
color: color(red blackness(80%));
}
與 hs1() 相似，不過更容易閱讀
body {
color: hwb(90, 0%, 0%, 0.5);
}
允許你使用超過50種漸變的灰度值，對于第一個參數，你可以使用 0 - 255 的數值或者百分比。
.foo {
color: gray(85);
}
.bar {
color: gray(10%, 50%);
}
允許使用4位或者8位十六進制數來表示顏色
body {
background: #9d9c;
}
如果你使用的是舊的瀏覽器（比如 IE8），那么把 rgba() 轉換為實體顏色
body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}
允許你使用新的顏色關鍵詞
body {
background: rgba(153, 221, 153, 0.8);
/* you will have the same value without alpha as a fallback */
}
通過 font-feature-settings降級的一種屬性。你可以通過這個鏈接來查看瀏覽器支持
h3 {
font-variant-caps: small-caps;
}
table {
font-variant-numeric: lining-nums;
}
W3C 的 filters 只允許使用url(data:*)來轉換 svg filter。
.blur {
filter: blur(4px);
}
允許你使用如何值的初始值。該值表示屬性初始化值所指定的值，但這并不意味著瀏覽器的默認值。
比如，對于display屬性，initial 時鐘標示內聯，因為這是屬性指定的初始值。一個例子，div { display: initial }并不代表block，而是inline。
div {
display: initial; /* inline */
}
在舊瀏覽器里將 rem 降級為 px（比如IE8）
h2 {
font-size: 1.5rem;
}
允許你使用:any-link偽類
nav :any-link {
background-color: yellow;
}
允許你使用:matches偽類
p:matches(:first-child, .special) {
color: red;
}
允許你使用支持最多選擇器的:not偽類，將此降級為只選擇一個選擇器的:not
p:not(:first-child, .special) {
color: red;
}
如果你的瀏覽器是舊瀏覽器，會將 :: 降級為:。
a::before {
/* ... */
}
將overflow-wrap轉換為word-wrap屬性
body {
overflow-wrap: break-word;
}
允許你使用不區分大小寫的屬性
[frame=hsides i] {
border-style: solid none;
}
允許你使用由空格分割的參數與可選的由斜線分割的不透明度新語法。
你也可以使用數字來表示顏色通道。
alpha 值接受百分比和數字，并且將 rgb() 作為可選參數。因此 rgb() 和 rgba() 現在是彼此的別名。
div {
background-color: rgb(100 222.2 100.9 / 30%);
}
允許你使用由空格分割的參數與可選的由斜線分割的不透明度新語法。
hsl() 現在接受角度（deg, grad, rad, turn）以及用數字表示色調，用百分比或者數字來表示 alpha 值。所以 hsl() 與 hsla() 現在也是彼此的別名。
div {
color: hsl(90deg 90% 70%);
background-color: hsl(300grad 25% 15% / 70%);
}
允許你使用 system-ui 通用字體系列。當前轉換提供了一個實際的字體列表來作為降級方案。
body {
font-family: system-ui;
}
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 的生成步驟不需要瀏覽器去執行。
使用 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的知識點有哪些”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
