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