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代码；可以添加未来语法；可以添加变量和逻辑；可以提供完整的网格系统；可以提供编码的快捷方式......还有很多很多。

优点：

多样化的功能插件，创建了一个生态的插件系统
根据你需要的特性进行模块化
快速编译,快3倍的速度
创建自己的插件
可以像普通的CSS一样使用它
不依赖于任何预处理器就具备创建一个库的能力
可以与许多流行工具无缝部署，例如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非常好用~

postCss 初识 （文章较长，需要耐心）

postCss 简介

PostCSS插件一览

解决公用css问题的插件

使用未来语法

更好的css可读性

图片和文字

校验器

其他

语法

Autoprefixer

precss

postcss-cssnext

cssnano

short

功能：

postcss-utilities

总结

你可能感兴趣的:(postCss 初识 （文章较长，需要耐心）)

postCss 初识（文章较长，需要耐心）

你可能感兴趣的:(postCss 初识（文章较长，需要耐心）)