PostCSS 以及 cssnext語法

本文是對近兩天學習postcss的總結，在這里分享給大家。

如有錯誤，還請指正！

什么是postcss

postcss 一種對css編譯的工具，類似babel對js的處理，常見的功能如：

1 . 使用下一代css語法

2 . 自動補全瀏覽器前綴

3 . 自動把px代為轉換成 rem

4 . css 代碼壓縮等等

postcss 只是一個工具，本身不會對css一頓操作，它通過插件實現功能，autoprefixer 就是其一。

與 less sass 的區別

less sass 是預處理器，用來支持擴充css語法。

postcss 既不是預處理器也不是后處理器，其功能比較廣泛，而且重要的一點是，postcss可以和less/sass結合使用

關于取舍

雖然可以結合less/sass使用，但是它們還是有很多重復功能，用其中一個基本就 ok 了。

以下是個人總結：

  • postcss 鼓勵開發者使用規范的CSS原生語法編寫源代碼，支持未來的css語法，就像babel支持ES6，而且高版本的谷歌瀏覽器已支持部分語法

  • less、sass 擴展了原生的東西，它把css作為一個子集，這意味這它比原生更強大，但是遲早會和原生的功能重復，比如css變量定義高版本的谷歌已經支持，再比如js現在的 require 和 import。

  • 可以結合使用

現階段來說區別不大，看個人喜好吧

如何使用

這里只說在webpack里集成使用，首先需要 loader

1 . 安裝

cnpm install postcss-loader --save-dev
復制代碼

2 . webpack配置

一般與其他loader配合使用，下面*標部分才是postcss用到的

配合時注意loader的順序（從下面開始加載）

rules: [{test: /\.css$/,exclude: /node_modules/,use: [{loader: 'style-loader',},{loader: 'css-loader',options: {importLoaders: 1,}},{//*loader: 'postcss-loader'}]}
]
復制代碼

3 . postcss配置

項目根目錄新建 postcss.config.js 文件，所有使用到的插件都需在這里配置，空配置項時配置xx:{}

module.exports = {plugins: {'autoprefixer': {browsers: '> 5%' //可以都不填，用默認配置}}
}
復制代碼

注：也可以在webpack中配置

常用的postcss插件

autoprefixer

前綴補全，全自動的，無需多說

安裝：cnpm install autoprefixer --save-dev

postcss-cssnext

使用下個版本的css語法，語法見cssnext (css4)語法

安裝：cnpm install postcss-cssnext --save-dev

別忘了在postcss.config.js配置：'postcss-cssnext':{}

cssnext包含了 autoprefixer ，都安裝會報錯，如下：

Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.
復制代碼

postcss-pxtorem

把px轉換成rem

安裝：cnpm install postcss-pxtorem --save-dev

配置項：

{rootValue: 16, //你在html節點設的font-size大小unitPrecision: 5, //轉rem精確到小數點多少位propList: ['font', 'font-size', 'line-height', 'letter-spacing'],//指定轉換成rem的屬性，支持 * ！selectorBlackList: [],// str/reg 指定不轉換的選擇器，str時包含字段即匹配replace: true,mediaQuery: false, //媒體查詢內的px是否轉換minPixelValue: 0 //小于指定數值的px不轉換
}
復制代碼

特殊技巧:不轉換成rem

px檢測區分大小寫，也就是說Px/PX/pX不會被轉換，可以用這個方式避免轉換成rem

相關資料： 官網

cssnext (css4)語法

cssnext 和 css4 并不是一個東西，cssnext使用下個版本css的草案語法

自定義屬性

相當于一個變量，變量的好處顯而易見，重復使用

1 . 定義

在 :root 選擇器定義一個css屬性

:root{--mianColor:#ffc001;
}
復制代碼

2 . 使用

使用 var(xx) 調用自定義屬性

.test{background: var(--mianColor);
}/*編譯后*/
.test{background: #ffc001;
}
復制代碼

比如在網站顏色上的使用，避免復制粘貼顏色

自定義屬性集

一個變量里存了多個屬性

1 . 定義

在 :root 選擇器定義一個css屬性集

:root{--fontCommon:{font-size:14px;font-family: 微軟雅黑;};
}
復制代碼

2 . 使用

使用 @apply xx 調用屬性集

.test{@apply --fontCommon;
}/*編譯后*/
.test{font-size:14px;font-family: 微軟雅黑;
}
復制代碼

大小計算

一般用于px rem等的計算

語法：cale(四則運算)

/*css3*/
.test {width: calc(100% - 50px);
}
/*css4 允許變量*/
:root {--fontSize: 1rem;
}
h1 {font-size: calc(var(--fontSize) * 2);
}/*編譯后*/
.test{font-size: 32px;font-size: 2rem;
}
復制代碼

自定義定義媒體查詢

1 . 定義

語法 @custom-media xx (條件) and (條件)

@custom-media --small-viewport (max-width: 30rem);
復制代碼

另外css4 可以使用>= 和 <= 代替min-width 、max-width

2 . 使用

@media (width >= 500px) and (width <= 1200px) {}
@media (--small-viewport) {}/*編譯后*/
@media (min-width: 500px) and (max-width: 1200px) {}
@media (max-width: 30rem) {}
復制代碼

自定義選擇器

1 . 定義

語法：@custom-selector :name selector1, selector2;

@custom-selector 后必須有空格

@custom-selector :--test .test1,.test2;
復制代碼

2 . 使用

語法：:name

:--test{color: #fff;
}/*編譯后*/
.test1,
.test2{color: #fff;
}復制代碼

注：與偽類使用，相互組合

@custom-selector :--test .test1,.test2;
@custom-selector :--testClass :hover,:focus;
:--test:--testClass{color: #fff;
}/*編譯后*/
.test1:hover,
.test2:hover,
.test1:focus,
.test2:focus{color: #fff;
}
復制代碼

選擇器嵌套

支持嵌套后，css代碼就不那么混亂了，而且方便

1 . 直接嵌套

語法 &

.test {& span {color: white;}
}/*編譯后*/
.test span {color: white;
}
復制代碼

2 . 指定如何嵌套

語法：@nest ... & ...,&指定位置

a {@nest span & {color: blue;}
}/*編譯后*/
span a {color: blue;
}
復制代碼

3 . 自動嵌套（媒體查詢中）

媒體查詢中自動嵌套到內部

.test {@media (min-width: 30rem) {color: yellow;}
}/*編譯后*/
@media (min-width: 30rem) {.test {color: yellow;}
}
復制代碼

image-set() 圖像依據分辨率設置不同的值

不常使用，后續補充

color() 調整顏色

示例，使用 color(value alpha(百分比)) 調整顏色

.test {color: color(red alpha(-10%));
}/*編譯后*/
.test {color: rgba(255, 0, 0, 0.9);
}
復制代碼

font-family 新增值 system-ui

system-ui 采用所有系統字體作為后備字體

body {font-family: system-ui;
}/*編譯后*/
body {font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue;
}
復制代碼

更多在官網查看

參考資料：官方網站 左手121

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/390393.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/390393.shtml
英文地址，請注明出處：http://en.pswp.cn/news/390393.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

5187. 收集足夠蘋果的最小花園周長

5187. 收集足夠蘋果的最小花園周長

給你一個用無限二維網格表示的花園&#xff0c;每一個 整數坐標處都有一棵蘋果樹。整數坐標 (i, j) 處的蘋果樹有 |i| |j| 個蘋果。 你將會買下正中心坐標是 (0, 0) 的一塊 正方形土地 &#xff0c;且每條邊都與兩條坐標軸之一平行。 給你一個整數 neededApples &#xff0c…
閱讀更多...
虛擬機 VMware Workstation12 安裝OS X 系統

虛擬機 VMware Workstation12 安裝OS X 系統

Windows下虛擬機安裝Mac OS X —– VMware Workstation12安裝Mac OS X 10.11本文即將介紹WIN虛擬MAC的教程。完整詳細教程&#xff08;包含安裝中的一些問題&#xff09;【并且適用其他mac os x版本】Windows下 VM12虛擬機安裝OS X 10.11(詳細教程) 工具/原料 Mac OS X 10.11 鏡…
閱讀更多...
aws dynamodb_DynamoDB備忘單–您需要了解的有關2020 AWS認證開發人員助理認證的Amazon Dynamo DB的所有信息

aws dynamodb_DynamoDB備忘單–您需要了解的有關2020 AWS認證開發人員助理認證的Amazon Dynamo DB的所有信息

aws dynamodbThe emergence of cloud services has changed the way we build web-applications. This in turn has changed the responsibilities of a Web Developer. 云服務的出現改變了我們構建Web應用程序的方式。 反過來&#xff0c;這改變了Web開發人員的職責。 We use…
閱讀更多...
北大CIO走進龍泉寺交流研討會圓滿舉行

北大CIO走進龍泉寺交流研討會圓滿舉行

緣起 2016年4月16日&#xff0c;北京大學信息化與信息管理研究中心秘書長姚樂博士與國家非物質文化遺產蔚縣剪紙傳承人周淑英女士一起在龍泉寺拜見了中國佛教協會會長、龍泉寺主持學誠法師。在拜見學誠法師時&#xff0c;姚樂博士與學誠法師聊到了“賢二機器僧”和人工智能。姚…
閱讀更多...
負載均衡種類

負載均衡種類

http://blog.csdn.net/zhoudaxia/article/details/23672319DNS DNS輪詢是最簡單的負載均衡方式。以域名作為訪問入口&#xff0c;通過配置多條DNS A記錄使得請求可以分配到不同的服務器。DNS輪詢沒有快速的健康檢查機制&#xff0c;而且只支持WRR的調度策略導致負載很難“均衡”…
閱讀更多...
代碼流星雨是什么形式_為什么要在2020年與流星合作

代碼流星雨是什么形式_為什么要在2020年與流星合作

代碼流星雨是什么形式Meteor, an allegedly dead development platform, is still alive and can bring massive value to your everyday coding experience.Meteor&#xff0c;據稱已失效的開發平臺&#xff0c;仍然有效&#xff0c;可以為您的日常編碼體驗帶來巨大的價值。 …
閱讀更多...
Centos7 Docker私有倉庫搭建

Centos7 Docker私有倉庫搭建

Centos7 Docker私有倉庫搭建 倉庫&#xff1a;集中存放鏡像的地方&#xff0c;可分為公共倉庫和私有倉庫&#xff08;公共倉庫"http://hub.docker.com"或國內的"http://www.daocloud.io"&#xff09; Registry&#xff1a;注冊服務器才是存放倉庫具體的服務…
閱讀更多...
MySQL觸發器使用詳解

MySQL觸發器使用詳解

MySQL包含對觸發器的支持。觸發器是一種與表操作有關的數據庫對象&#xff0c;當觸發器所在表上出現指定事件時&#xff0c;將調用該對象&#xff0c;即表的操作事件觸發表上的觸發器的執行。 創建觸發器在MySQL中&#xff0c;創建觸發器語法如下&#xff1a; 代碼如下: CREATE…
閱讀更多...
java中訪問修飾符_Java中的訪問修飾符介紹

java中訪問修飾符_Java中的訪問修飾符介紹

java中訪問修飾符什么是訪問修飾符&#xff1f; (What are Access Modifiers?) Have you ever wanted to define how people would access some of your properties? You would not want anyone using your underwear. However, your close friends and relatives can use yo…
閱讀更多...
VIM 編輯器

VIM 編輯器

2019獨角獸企業重金招聘Python工程師標準>>> VIM 相對于VI 的提升 VIM 支持多級撤銷VIM 可以跨平臺運行VIM 支持語法高亮VIM 支持圖形界面VIM 編輯器的操作模式 Command Mode -命令模式Insert Mode -輸入模式Last Lin Mode -底行模式#使用yum 命令安裝vim 軟件&…
閱讀更多...
/etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc 文件的作用

/etc/profile、/etc/bashrc、~/.bash_profile、~/.bashrc 文件的作用

轉載自&#xff1a;http://blog.csdn.net/u013968345/article/details/21262033 /etc/profile:此文件為系統的每個用戶設置環境信息,當用戶第一次登錄時,該文件被執行. 并從/etc/profile.d目錄的配置文件中搜集shell的設置. /etc/bashrc:為每一個運行bash shell的用戶執行此文件…
閱讀更多...
python初學者_終極Python初學者手冊

python初學者_終極Python初學者手冊

python初學者Python has become one of the fastest-growing programming languages over the past few years. 在過去的幾年中&#xff0c;Python已成為增長最快的編程語言之一。 Not only it is widely used, it is also an awesome language to tackle if you want to get …
閱讀更多...
z-index

z-index

z-index 這個東西非常簡單&#xff0c;它有四大特性&#xff0c;每個特性你記住了&#xff0c;頁面布局就不會出現找不到盒子的情況。 z-index 值表示誰壓著誰&#xff0c;數值大的壓蓋住數值小的&#xff0c;只有定位了的元素&#xff0c;才能有z-index,也就是說&#xff0c;不…
閱讀更多...
大型運輸行業實戰_day12_1_權限管理實現

大型運輸行業實戰_day12_1_權限管理實現

1.業務分析 權限說的是不同的用戶對同一個系統有不同訪問權限,其設計的本質是:給先給用戶分配好URL,然后在訪問的時候判斷該用戶是否有當前訪問的URL. 2.實現 2.1數據庫設計標準5表權限結構 2.2.sql語句實現,根據用戶id查詢該用戶所有的資源 sql語句: SELECT ur.user_id, r.u…
閱讀更多...
aws python庫_如何使用Python，AWS和IEX Cloud創建自動更新股市數據的Excel電子表格

aws python庫_如何使用Python，AWS和IEX Cloud創建自動更新股市數據的Excel電子表格

aws python庫Many Python developers in the financial world are tasked with creating Excel documents for analysis by non-technical users.金融界的許多Python開發人員的任務是創建Excel文檔&#xff0c;以供非技術用戶進行分析。 This is actually a lot harder than i…
閱讀更多...
37）智能指針（就是自動delete空間）

37）智能指針（就是自動delete空間）

1&#xff09;問題引入&#xff1a; 在java或者在C中&#xff0c;一旦你new一個東西&#xff0c;那么必然有一個delete與之對應&#xff0c;比如&#xff1a; 1 int main&#xff08;&#xff09;2 {3 int* p new int&#xff08;&#xff09;&#xff1b;4 5 *…
閱讀更多...
linux 安裝maven

linux 安裝maven

2019獨角獸企業重金招聘Python工程師標準>>> 目錄:/usr/local/maven 1.下載 wget http://mirrors.hust.edu.cn/apache/maven/maven-3/3.5.3/binaries/apache-maven-3.5.3-bin.tar.gz 2.解壓 tar -zxvf apache-maven-3.5.3-bin.tar.gz 3.配置 vi /etc/profile #講下面…
閱讀更多...
自由開發者怎么生存_如何作為自由開發者生存

自由開發者怎么生存_如何作為自由開發者生存

自由開發者怎么生存It’s been 8 weeks since we started experiencing the dramatic impact of the COVID-19 pandemic. In that time, we’ve all borne witness to how this virus can impact our families, our communities, and our livelihood. 自我們開始體驗COVID-19大…
閱讀更多...
UUID生成字符串

UUID生成字符串

在向數據庫插入新數據時&#xff0c;可能需要插入字符串形式的ID&#xff0c;這時使用UUID可以生成隨機字符串&#xff1a; String str UUID.randomUUID().toString(); 轉載于:https://www.cnblogs.com/suhfj-825/p/8260861.html
閱讀更多...
如何在React Native中使用react-navigation 5處理導航

如何在React Native中使用react-navigation 5處理導航

React-navigation is the navigation library that comes to my mind when we talk about navigation in React Native. 當我們談論React Native中的導航時&#xff0c;React-navigation是我想到的導航庫。 Im a big fan of this library and its always the first solution I…
閱讀更多...
最新文章

Copyright @ 2022~2023