postcss和cssnext理解与使用

吴修洁

2023-12-01

什么是postcss

postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：

使用下一代css语法
自动补全浏览器前缀
自动把px代为转换成 rem
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;
}

postcss和cssnext理解与使用

什么是postcss

与 less sass 的区别

关于取舍

如何使用

常用的postcss插件

autoprefixer

postcss-cssnext

postcss-pxtorem

cssnext (css4)语法

自定义属性

自定义属性集

大小计算

自定义定义媒体查询

自定义选择器

选择器嵌套

image-set() 图像依据分辨率设置不同的值

color() 调整颜色

font-family 新增值 system-ui

更多在官网查看

相关阅读

相关文章

相关问答

相关文档