postcss 以及 cssnext语法 -凯发k8官方网

本文是对近两天学习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

相关资料： 凯发k8官方网官网

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; } 复制代码

更多在凯发k8官方网官网查看

参考资料：官方网站 左手121

总结

以上是凯发k8官方网为你收集整理的postcss 以及 cssnext语法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。