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非常好用~
785
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
