postCss 初識 （文章較長，須要耐心）

01.postCss簡介

02.postCss插件一覽

03.Autoprefixer

04.Press

05.Cssnext

06.Cssnano

07.Short

08.postcss-utilities

09.總結

postCss 簡介

"PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more."

PostCSS是一個能夠用過js插件轉化css的工具。這些插件能夠支持變量，混合宏，轉化將來語法，行內圖片等等。

簡而言之，PostCSS是CSS變成JavaScript的數據，使它變成可操做。PostCSS是基於JavaScript插件，而後執行代碼操做。PostCSS自身並不會改變CSS，它只是一種插件，爲執行任何的轉變鋪平道路。

本質上是沒有限制PostCSS插件操縱CSS，也就是說它能夠適用於任何CSS。只要你能想到的，你均可以編寫一個PostCSS插件，讓它來轉成CSS。

PostCSS插件能夠像預處理器，它們能夠優化和autoprefix代碼；能夠添加將來語法；能夠添加變量和邏輯；能夠提供完整的網格系統；能夠提供編碼的快捷方式......還有不少不少。

優勢：

1. 多樣化的功能插件，建立了一個生態的插件系統
2. 根據你須要的特性進行模塊化
3. 快速編譯,快3倍的速度
4. 建立本身的插件
5. 能夠像普通的CSS同樣使用它
6. 不依賴於任何預處理器就具有建立一個庫的能力
7. 能夠與許多流行工具無縫部署，例如webpack,gulp,codepen等

摘錄文檔——大漠系列

PostCSS插件一覽

目錄

解決公用css問題的插件

• postcss-use

能夠在樣式表裏經過@use明確地設置你須要的插件而且只在當前文件執行

• postcss-module

解決命名衝突問題，打碎原有class，生成新的class，並生成生成一個JSON文件（sources map）和本來的class關聯

• postcss-autoreset

全局重置，有效隔離組件

• postcss-initial

添加 all: initial支持，容許重設全部繼承樣式。

• cq-prolifill

經過父元素的狀態查詢，定義樣式

使用將來語法

• autoprefixer

自動添加私有前綴，數據從can I use 獲取

• postcss-cssnext

使用將來css功能，已包含autoprefixer

• postcss-image-set-polyfill

使用image-set功能控制圖片在不一樣分辨率下的輸出

更好的css可讀性

• precss

precss包含相似SASS之類的功能，插件和變量同樣，嵌套，和混合。

• postcss-sorting

整理語法格式

• postcss-utilities

包含不少封裝好的方法，能夠直接使用

簡短的先進的速記屬性

圖片和文字

• postcss-assets

尋找並補充完成圖片路徑，緩存圖片，計算各類格式圖片尺寸，支持base64轉碼

• postcss-sprites

從樣式表中提取合成精靈圖

• font-magician

自動幫你生成@font-face規則，不須要顧忌網絡安全字體規則

• postcss-inline-svg

引用svg文件，而且用css語法控制其屬性

• postcss-write-svg

可直接在樣式表聲明svg

校驗器

• stylelinter

強大的語法校驗器

• stylefmt

自動格式化工具

• doiuse

從can I use 獲取數據，輸出對應文件內屬性的支持狀況

• colorguard

設置你想要的顏色，當輸入色號相近或者相同提醒你

其餘

• postcss-rtl

經過設置翻轉特性，在一個文件內生成左右方向相反的樣式代碼

• cssnano

格式化代碼，簡化代碼，美化代碼，壓縮代碼

• lost

lostGrid經過cacl()提供驚人的網格系統，無需使用者定義大量的選項

• rtlcss

生成左右對稱鏡像css樣式表

語法

• sugarss

像sass或stylus同樣的縮進格式

• postcss-less

像less同樣書寫，可是不能直接編譯成css

• postcss-less-engine

像less同樣書寫，而且，使用正確的less.js能夠編譯成css

• postcss-scss

像scss同樣書寫，可是不能直接編譯成css

• postcss-js

支持在js裏寫樣式表

• postcss-safe-parser

找到並修復css語法錯誤

• midas

能夠把CSS字符串轉換成HTML輸出

Autoprefixer

文檔

根據配置，自動添加瀏覽器私有前綴

autoprefixer裏可配置的參數有8個：

browser（array）

配置方法：

1.直接在autoprefixer裏配置；

2.配置BROWSERSLIST環境變量；

3.在當前活父級目錄，配置browserlist.config文件；

4.在package.json文件配置browserlist參數；

5.以上都不配置或不能生效，默認使用> 1%, last 2 versions, Firefox ESR。

官方推薦3,4

指定版本：

• last 2 versions：主流瀏覽器最新的兩個版本
• last 2 Chrome versions：chrome最新的兩個版本

• 5%：使用率大於5%的瀏覽器

• 5% in US

• 5% in my stats

• ie 6-8
• Firefox > 20
• Firefox >= 20
• Firefox >= 20
• Firefox <= 20
• Firefox ESR
• iOS 7
• not ie <= 8

env(string): browserlist環境

cascade(boolean)： 當樣式表未壓縮時，是否使用視覺級聯

add(boolean): 是否添加私有前綴

remove(boolean): 是否移除過期私有前綴

supports(boolean): 是都爲@supports參數添加私有前綴

flexbox(boolean|string): 是否爲flexbox添加私有前綴，「no-2009」只會給最後一個版本和IE版本添加前綴

grid(boolean): 是否給網格佈局屬性添加IE前綴

stats(object): 自定義統計用戶使用率，可定義使用率和地區

precss

文檔

DEMO

嵌套

三大主流預處理器，好比Sass、LESS和Stylus中都具備嵌套特性，在PreCSS中也有。PreCSS中的嵌套同Sass或LESS中的實現方法同樣，都是經過在選擇器的大括號內嵌套選擇器。

PreCSS和其的預處理器同樣，可使用 & 符，把父選擇器複製到子選擇器中。

變量

PreCSS和其餘預處理器同樣，都具備變量這種特性。只不過每一個處理器以前聲明變量的語法規則是不一樣的：

LESS中使用 @ 符聲明變量，好比 @color: #ccc;

Stylus中使用 color=#ccc;

Sass中使用 color: #ccc;

在PreCSS中保持了相似Sass聲明變量的語法，在 $ 符號後面緊跟變量名，而後變量名後面有冒號 : ，其後再是變量值。

條件

在Sass和Stylus中提供了相似於 if 和 else 這樣的條件命令，但在LESS中提供了 guarded mixins 功能，可它們不具有徹底相同的功能。在PreCSS中也有條件命令這樣的特性，其語法和Sass的相同，也是使用 @if 和 @else 。

before:

.notice--clear {
    @if 3 < 5 {
        background: green;
    }
    @else {
        background: blue;
    }
}
複製代碼

after:

.notice--clear {
    background: green;
}
複製代碼

PS：處理複雜條件判斷時，目前輸出結果不如預期。

循環：@for和@each

1.@for 循環

@for 循環中有一個計數器變量，用來設置循環的週期，一般設置爲 i 等於 1 ，第二個等於 2 ，第三個等於 3 。

能夠在選擇器或樣式規則中插入這個變量 $i ，這樣能夠很是方便的生成像 nth-of-type() 的選擇器和計算寬度。

before:

@for $i from 1 to 3 {
    .b-$i { width: $(i)px; }
}
複製代碼

after:

.b-1 {
    width: 1px
}
.b-2 {
    width: 2px
}
.b-3 {
    width: 3px
}
複製代碼

2.@each循環

在 @each 循環中，它的一個循環週期是一個項目列表而不是數字。和 @for 循環同樣，能夠列表的當前項填充到選擇器和樣式規則中。

注意：插入到一個字符串中你須要使用一組括號包裹一個變量名(如 ($var) ) 。

before:

@each $icon in (foo, bar, baz) {
    .icon-$(icon) {
        background: url('icons/$(icon).png');
    }
}
複製代碼

after:

.icon-foo {
    background: url('icons/foo.png');
}

.icon-bar {
    background: url('icons/bar.png');
}

.icon-baz {
    background: url('icons/baz.png');
}
複製代碼

混合宏(Mixins)

在PreCSS中，使用了另外一個聲明方式，使用 @define-mixin mixin_name arg2 {...}來聲明一個混合宏，而後使用 @mixin mixin_name pass_arg1, pass_arg2; 來調用聲明好的混合宏。

before:

@define-mixin icon $name {
    padding-left: 16px;

    &::after {
        content: "";
        background-url: url(/icons/$(name).png);
    }
}

.search {
    @mixin icon search;
}
複製代碼

after:

.search {
    padding-left: 16px;
}

.search::after {
    content: "";
    background-url: url(/icons/search.png);
}
複製代碼

注意：混合宏參數能夠像上面介紹的 @each 循環同樣，使用一組括號括起參數，如 ($var) ，會將參數看成字符串插入到選擇器中。

@mixin-content

除了能夠傳遞參數以外，還能夠傳遞內容。這個過程和Sass中的 @content 本質是相同的。

@define-mixin icon $network, $color { 
	.button.$(network) { 
		background-image: url('img/$(network).png'); 
		background-color: $color; 
		@mixin-content;
} 
複製代碼

使用混合宏中的@mixin-content必須得放在一個花括號{}中，而不是在結束一行的;後面，否則編譯有可能會沒法進行。

像下面的代碼同樣，從新更新你的混合代碼：

@mixin icon twitter, blue { width: 3rem; }
@mixin icon youtube, red { width: 4rem; }
複製代碼

編譯以後，將生成下面的所示的代碼，注意寬度使用混合宏的方式已添加進去了：

.button.twitter { 
	background-image: url('img/twitter.png'); 
	background-color: blue; 
	width: 3rem; 
} 
.button.youtube { 
	background-image: url('img/youtube.png'); 
	background-color: red; 
	width: 4rem; 
}
複製代碼

擴展

在某種意義上擴展相似於混合宏，他們旨在讓你複用重用的代碼塊。然而，擴展的想法是建立一個屢次複用的代碼塊。

在PreCSS中使用 @define-extend extend_name{...} 方式來聲明擴展的代碼塊。

before:

@define-extend bg-green {
    background: green;
}

.notice--clear {
    @extend bg-green;
}
複製代碼

after:

.notice--clear {
    background: green;
}
複製代碼

Imports

文件引入

before:

@import "partials/base"; /* Contents of partials/_base.css: `body { background: black; }` */
複製代碼

after:

body { background: black; }
複製代碼

Property Lookup

屬性傳遞

before:

.heading {
    margin: 20px;
    padding: @margin;
}
複製代碼

after:

.heading {
    margin: 20px;
    padding: 20px;
}
複製代碼

Root

經過@at-root聲明根屬性

before:

.parent {
    background: white;

    @at-root{
        .child {
            background: black;
        }
    }
}
複製代碼

after:

.child {
    background: black;
}

.parent {
    background: white;
}
複製代碼

postcss-cssnext

文檔

讓你能夠在如今就是用將來語法，自動幫你兼容

功能

• automatic vendor prefixes

使用autoprefixer自動添加私有前綴

• custom properties & var()

自定義屬性，var（）調用

:root {
		--mainColor: red;
	}
	
	a {
		color: var(--mainColor);
	}
複製代碼

• custom properties set & @apply

自定義屬性組，@apply調用

:root {
		--danger-theme: {
			color: white;
			background-color: red;
		};
	}
	
	.danger {
		@apply --danger-theme;
	}
複製代碼

• reduced calc()

簡化 calc

:root {
	  --fontSize: 1rem;
	}
	
	h1 {
	  font-size: calc(var(--fontSize) * 2);
	}
複製代碼

• custom media queries

自定義媒體查詢

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

• media queries ranges （容許使用>=或<=聲明條件）

自定義媒體查詢序列

@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 selectors

自定義選擇器

@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
	   */
	}
複製代碼

• nesting

嵌套

• color() function

轉化成rgba

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

• hwb() function

轉化成rgba

body {
		color: hwb(90, 0%, 0%, 0.5);
	}
複製代碼

• gray() function

轉化成rgba

.foo {
		color: gray(85);
	}
複製代碼

• #rrggbbaa colors

可使用4位或者8位顏色寫法

body {
		background: #9d9c;
	}
複製代碼

• rgba function (rgb fallback)
• rebeccapurple color(關鍵字顏色)

可使用顏色關鍵字

body {
		color: rebeccapurple;
	}
複製代碼

• font-variant property

css3新屬性，轉化爲font-feature-setting

h2 {
		font-variant-caps: small-caps;
	}
	
	table {
		font-variant-numeric: lining-nums;
	}
複製代碼

• filter property (svg fallback)

支持濾鏡功能

.blur {
	    filter: blur(4px);
	}
複製代碼

• initial value

div {
		display: initial; /* inline */
	}
複製代碼

• rem unit (px fallback)

轉化成px

h1 {
		font-size: 1.5rem;
	}
複製代碼

• :any-link pseudo-class

匹配任何連接

nav :any-link {
		background-color: yellow;
	}
複製代碼

• :matches pseudo-class

匹配條件

p:matches(:first-child, .special) {
		color: red;
	}
複製代碼

• :not pseudo-class (to l.3)

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

• ::pseudo syntax (: fallback)

轉化::到:

a::before {
		/* ... */
	}
複製代碼

• overflow-wrap property (word-wrap fallback)

轉化成 word-wrap

body {
    	overflow-wrap: break-word;
    } 
複製代碼

• attribute case insensitive

不區分大小寫

[frame=HSIDES i] {
		border-style: solid none;
	}
複製代碼

• rgb() function (functional-notation)

容許使用新的顏色寫法（空格，斜槓等）

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

• hsl() function (functional-notation)

容許使用新的顏色寫法（空格，斜槓等）

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

cssnano

文檔

格式化代碼，簡化代碼，美化代碼，壓縮代碼

功能：

• 刪除過期的私有前綴
• 將顏色值轉換爲較短的等效值
• 過濾換行，空格和分號
• 刪除重複的規則（規則同樣）
• 刪除重寫的規則（規則被重寫，不調用的被刪除）
• 經過過濾函數，規範空格
• 規範css的功能空白
• 將屬性合併爲簡寫
• 規範字體變量
• 規範參數寫法
• 確保只有一個@charset
• 規範unicode-range的描述
• 規範速記值排序

before:

.box {
		border: solid 1px red;
		border: #fff solid 1px;
	}
複製代碼

after:

.box {
		border: 1px solid red;
		border: 1px solid #fff;
	}
複製代碼

• 規範display定義

before:

.box {
		display: block flow;
	}
複製代碼

after:

.box {
		display: block;
	}
複製代碼

• 規範初始值

before:

.box {
		min-width: initial;
	}
複製代碼

after:

.box {
    	min-width: 0;
    }
複製代碼

• 規範過渡定時

before:

.box {
	    transition: color 3s steps(30, end);
	}
複製代碼

after:

.box {
	    transition: color 3s steps(30);
	}
複製代碼

• 規範其餘postCss插件的空格
• 刪除重複的選擇器
• 減小css計算器

before:

.box {
	    width: calc(2 * 100px);
	}
複製代碼

after:

.box {
	    width: 200px;
	}
複製代碼

• 轉換長度，時間和角度(詳細)
• 移除css註釋
• 移除空規則和聲明
• 移除未使用的定義
• 刪除重複的postCss插件
• 合併在不用名稱下的規則

before:

@keyframes fadeOut {
	    from {
	        opacity: 1;
	    }
	    to {
	        opacity: 0;
	    }
	}
	@keyframes dissolve {
	    from {
	        opacity: 1;
	    }
	    to {
	        opacity: 0;
	    }
	}
	.box {
	    animation-name: dissolve;
	}
複製代碼

after:

@keyframes fadeOut {
	    from {
	        opacity: 1;
	    }
	    to {
	        opacity: 0;
	    }
	}
	.box {
	    animation-name: fadeOut;
	}
複製代碼

• 合併相鄰的規則（合併相同選擇器的規則）

before:

.box {
	    color: blue;
	}
	.box {
	    font-weight: 700;
	}
複製代碼

after:

.box {
	    color: blue;
	    font-weight: 700;
	}
複製代碼

• 規範css漸變功能

before:

.box {
	    background: linear-gradient(to bottom, #ffe500 0%, #ffe500 50%, #121 50%, #121 100%);
	}
複製代碼

after:

.box {
	    background: linear-gradient(180deg, #ffe500, #ffe500 50%, #121 0, #121);
	}
複製代碼

• 規範選擇器寫法

before:

*.box
	.box::before
	.box       .box
	[class*="box"]
	.box ~ [class] {
	    color: red;
	}
複製代碼

after:

.box
	.box:before
	.box .box
	[class*=box]
	.box~[class] {
	    color: red;
	}
複製代碼

• 規範引號及內字符串

before:

.box {
	    quotes: '«' "»";
	    content: 'This is a string which is \
	broken over multiple lines.';
	}
複製代碼

after:

.box {
	    quotes: "«" "»";
	    content: "This is a string which is broken over multiple lines.";
	}
複製代碼

• 規範連接符串

before:

.box {
	    background: url("./css/../img/cat.jpg");
	}
複製代碼

after:

.box {
	    background: url(img/cat.jpg);
	}
複製代碼

• 規範背景重複屬性定義

before:

.box {
	    background: url("./css/../img/cat.jpg");
	}
複製代碼

after:

.box {
	    background: url(img/cat.jpg);
	}
複製代碼

• 重命名關鍵字標識符（ Renames at-rules such as @keyframes. This can be potentially unsafe if other JS/CSS files need to read this definition.）

before:

@keyframes fadeOut {
	    from {
	        opacity: 1;
	    }
	    to {
	        opacity: 0;
	    }
	}
	.box {
	    animation-name: fadeOut;
	}
複製代碼

after:

@keyframes a {
	    from {
	        opacity: 1;
	    }
	    to {
	        opacity: 0;
	    }
	}
	.box {
	    animation-name: a;
	}
複製代碼

• 規範css位置定義

before:

.box {
	    background: 30% center / 50% 50%;
	}
複製代碼

after:

.box {
	    background: 30% / 50% 50%;
	}
複製代碼

• 規範css transform定義

before:

.box {
	    transform: translate3d(0, 0, 0);
	}
複製代碼

after:

.box {
	    transform: translateZ(0);
	}
複製代碼

• 壓縮內聯SVG

before:

.box {
	    background:url('data:image/svg+xml;utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20fill%3D%22yellow%22%20%2F%3E%3C!--test%20comment--%3E%3C%2Fsvg%3E');
	}
複製代碼

after:

.box {
	    background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='40' fill='%23ff0'/%3E%3C/svg%3E");
	}
複製代碼

• 變基z-index值

before:

.box {
	    z-index: 5000;
	}
複製代碼

after:

.box {
	    z-index: 1;
	}   
複製代碼

short

功能：

Size

同時聲明寬高

before:

.icon {
	size: 48px;
}
複製代碼

after:

.icon {
    width: 48px;
    height: 48px;
}
複製代碼

Margin and Padding

用*省略不須要的margin或padding值

before:

.frame {
	margin: * auto;
}
複製代碼

after:

.frame {
    margin-right: auto;
    margin-left: auto;
}
複製代碼

Position

在position屬性中同時聲明上右下左，不須要的用*省略

before:

.banner {
	position: fixed 0 0 *;
}
複製代碼

after:

.banner {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
}
複製代碼

Color

同時聲明顏色和背景色

before:

.canvas {
	color: #abccfc #212231;
}
複製代碼

after:

.canvas {
    color: #abccfc;
    background-color: #212231;
}
複製代碼

Border

省略邊的聲明，而且能夠聲明單獨的屬性

before:

.container {
	border: 1px 2px / * / #343434;
}

.container--variation {
	border-width: * * 3px;
}
複製代碼

after:

.container {
    border-width: 1px 2px;
    border-color: #343434;
}

.container--variation {
	border-bottom-width: 3px;
}
複製代碼

Border Radius

按順時針的方向，聲明border-radius變量

before:

.container {
	border-bottom-radius: 10px;
}
複製代碼

after:

.container {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
複製代碼

Font Size

同時聲明字號和行高

before:

.heading {
	font-size: 1.25em / 2;
}
複製代碼

after:

.heading {
    font-size: 1.25em;
    line-height: 2;
}
複製代碼

Font Weight

用通用名稱聲明fontweight

before:

p {
	font-weight: light;
}
複製代碼

after:

p {
	font-weight: 300;
}
複製代碼

詳細對應表

postcss-utilities

文檔

@util aspect-ratio([ratio])

before:

.box-16-9 {
	@util aspect-ratio(16:9);
}
複製代碼

after:

.box-16-9 {
	position: relative;
	display: block;
	height: 0;
	padding: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
}
複製代碼

@util border-color([colors])

before:

.foo {
	@util border-color(#fff null #000 red);
}
複製代碼

after:

.foo {
	border-top-color: #fff;
	border-bottom-color: #000;
	border-left-color: red;
}
複製代碼

@util border-top-radius([radius]);

@util border-right-radius([radius]);

@util border-bottom-radius([radius]);

@util border-left-radius([radius]);

before:

.foo {
	@util border-top-radius(1px);
}

.foo {
	@util border-right-radius(2px);
}

.foo {
	@util border-bottom-radius(3px);
}

.foo {
	@util border-left-radius(4px);
}
複製代碼

after:

.foo {
	border-top-left-radius: 1px;
	border-top-right-radius: 1px;
}

.foo {
	border-bottom-right-radius: 2px;
	border-top-right-radius: 2px;
}

.foo {
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

.foo {
	border-bottom-left-radius: 4px;
	border-top-left-radius: 4px;
}
複製代碼

@util border-width([sizes])

before:

.foo {
	@util border-width(1em null 20px 3%);
}
複製代碼

after:

.foo {
	border-top-width: 1em;
	border-bottom-width: 20px;
	border-left-width: 3%;
}
複製代碼

@util center

before:

.child {
	@util center;
}
複製代碼

after:

.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
複製代碼

@util center

before:

.child {
	@util center;
}
複製代碼

after:

.child {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
複製代碼

Add to options: { centerMethod: 'flexbox' } to use this method.

before:

.parent {
	@util center;
}
複製代碼

after:

.parent {
	display: flex;
	align-items: center;
	justify-content: center;
}
複製代碼

@util center-block

須要寬度

before:

.center {
	@util center-block;
}
複製代碼

after:

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}
複製代碼

@util circle([radio], [color])

before:

.circle {
	@util circle(200px, #268BD2);
}
複製代碼

after:

.circle {
	height: 200px;
	width: 200px;
	border-radius: 50%;
	color: #268BD2;
}
複製代碼

@util clearfix;

before:

.cfx {
	@util clearfix;
}
複製代碼

after:

.cfx:after {
	content: '';
	display: block;
	clear: both;
}
複製代碼

@util hd([min-resolution]) { [nested-rules] }

默認120dpi

before:

@util hd {
	.foo {
		float: right;
	}
}
	
@util hd(192dpi) {
	.bar {
		float: left;
	}
}
複製代碼

after:

@media print,
   (min-resolution: 1.25dppx),
   (min-resolution: 120dpi) {
	.bar {
		border: 0;
	}
}
	
@media print,
   (min-resolution: 2dppx),
   (min-resolution: 192dpi) {
	.bar {
		float: left;
	}
}
複製代碼

@util hr([color], [vertical-margin])

before:

hr {
	@util hr(#000, 20px);
}
複製代碼

after:

hr {
	height: 1px;
	border: 0;
	border-top: 1px solid #000;
	margin: 20px 0;
	display: block;
}
複製代碼

@util margin([sizes])

padding同樣

before:

.foo {
	@util margin(1em null 20px 3%);
}
複製代碼

after:

.foo {
	margin-top: 1em;
	margin-bottom: 20px;
	margin-left: 3%;
}
複製代碼

@util position([position], [lengths])

before:

.foo {
	@util position(absolute, 0 null null 10em);
}
複製代碼

after:

.foo {
	top: 0;
	left: 10em;
	position: absolute;
}
複製代碼

@util reset-list

移除列表默認樣式

before:

ul {
	@util reset-list;
	background-color: #fff;
}
複製代碼

after:

ul {
	background-color: #fff;
	margin-top: 0;
	margin-bottom: 0;
	padding-left: 0;
}
	
li {
	list-style: none;
}
複製代碼

@util reset-text

移除文本默認樣式

before:

.foo {
	@util reset-text;
}
複製代碼

after:

.foo {
	font-family: sans-serif;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-break: auto;
	line-height: 1.5;
	text-align: left;
	text-align: start;
	text-decoration: none;
	text-shadow: none;
	text-transform: none;
	white-space: normal;
	word-break: normal;
	word-spacing: normal;
	word-wrap: normal;
}
複製代碼

@util size([width], [height])

@util sticky-footer([footer height], [wrapper selector])

確認給定高度的footer在頁面底部，即便內容很短的時候，須要對html設置position:relative;min-height:100%

before:

footer {
	@util sticky-footer(100px);
}
複製代碼

after:

body {
	margin-bottom: 100px;
}

footer {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100px;
	width: 100%;
}
複製代碼

@util text-stroke([size], [color], [smooth])

給文本添加陰影

before:

.stroke {
	@util text-stroke(1px, #d50200);
}
複製代碼

after:

.stroke {
	text-shadow: -1px -1px 0 #d50200,
				 -1px 0 0 #d50200,
	             -1px 1px 0 #d50200,
	             0 -1px 0 #d50200,
	             0 0 0 #d50200,
	             0 1px 0 #d50200,
	             1px -1px 0 #d50200,
	             1px 0 0 #d50200,
	             1px 1px 0 #d50200;
}
複製代碼

@util triangle([size], [color], [orientation])

默認大小12px,顏色黑色，方向向下

方向：{up, down, left, right, up-left, up-right, down-left, down-right}

before:

.triangle-up {
	@util triangle(20px, blue, up);
}
複製代碼

after:

.triangle-up {
	display: inline-block;
	height: 0;
	width: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid blue;
}
複製代碼

@util truncate

單行溢出隱藏

before:

.truncate {
	@util truncate;
}
複製代碼

after:

.truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
複製代碼

@util truncate([lines], [line-height])

多行溢出隱藏，默認3行，行高1.5倍

before:

.truncate {
	@util truncate(3, 1.5);
}
複製代碼

after:

.truncate {
	display: block;
	display: -webkit-box;
	height: 4.5em;
	line-height: 1.5;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
複製代碼

@util word-wrap([wrap])

默認值break-word

before:

.foo {
	@util word-wrap;
}

.bar {
	@util word-wrap(normal);
}
複製代碼

after:

.foo {
	overflow-wrap: break-word;
	word-break: break-all;
	word-wrap: break-word;
}

.bar {
	overflow-wrap: normal;
	word-break: normal;
	word-wrap: normal;
}
複製代碼

總結

PostCss很是好用~