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
嵌套
三大主流预处理器，比如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非常好用~