Postcss 简明教程 及 css module

在前端开发中一直有个原则，叫做"关注点分离"，意思就是各种技术只负责自己的领域，不要混合在一起，形成耦合，这种原则比较直观的体现就是不要写"行内样式"（inline style）和"行内脚本"（inline script），HTML、CSS、JavaScript各干各的事，避免混用（此处参考CSS in JS 简介）

现在前端在进行开发时，基本都被各种框架覆盖，新起一个项目，第一步都是技术选型。看看是用 React、还是用 Vue，然后再配套的去选择相关技术栈，以及相应的框架。这是技术的进度，让开发人员能比较关注业务逻辑的展开，但另一方面也可以认为这是一种枷锁。。。

由于框架的使用，使我们之前的关注点分离变的策略，现在其实都是在 js 中进行。HTML 以 虚拟DOM 的形式存在其中，css 通常是以 import 的形式载入，最终通过 webpack 之类的工具，再导出成一个独立的样式文件。

相比 HTML，框架对 CSS 都没进行什么特殊处理，也没有形成类似 JSX 的解决方案，不过这其中倒是有一个比较有意思的解决方案：css-in-js（不过在 js 中写 css，怎么都感觉有些别扭）。

另外 css 本身编程能力薄弱，社区也形成各种方案来提升 css 编程能力。相比其他方案，我感觉 Postcss 更为优雅，所以这里特别介绍下

目前是基于 postcss 7.0.31 版本

基本概念

  • Postcss是一个用 js 插件转换成 css 的工具
  • Postcss 不是预处理器

预处理器是指对 css 能力增强的功能，添加一些一些本身不是css的功能(比如嵌套、变量)，通过处理后能转成普通的CSS，

  • Postcss 不是后处理器

通过一些规则把已有的css进行完善，比如添加浏览器前缀

  • Postcss 是作为一个平台的存在，利用 Postcss 提供的插件可以组合各种不同模块，来构建更为复杂的功能

Demo

此处没有使用vue或react的脚手架，为了演示完整功能，构建了一个基于Vue的开发环境，并演示加载样式和提取

  • 任意目录 npm init -y

使用这种方式，项目的名词一定不要和某些库的名词冲突，比如叫webpack，postcss，如果叫这个名词安装相关库时就会报ENOSELF的错误

  • 安装 相关依赖

npm i --save-dev webpack webpack-cli webpack-dev-server html-webpack-plugin postcss postcss-loader mini-css-extract-plugin css-loader style-loader @babel/cli @babel/core @babel/preset-env vue-loader vue-template-compiler

npm i --save vue

* css-loader 是可以在页面中使用 import 引入 css 的能力
* style-loader 是把 css 代码生成 style 标签，放到 head 标签中
* mini-css-extract-plugin 提取css用的插件

其他包不在本文讨论范围，故不介绍

  • 新建两个文件夹 src 、dist，以及 babel.config.js、 webpack.config.js 和其他相关文件
/// babel.config.js
const presets = [["@babel/env"]];

module.exports = {
    presets
}
...
/// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
    entry: './src/index.js',
    resolve: {
        extensions: ['.js', '.vue']
    },
    output: {
        filename: '[name].js',
        publicPath: '/'
    },
    mode: 'development',
    module: {
        rules: [
            {test: /\.js$/, use: 'babel-loader', exclude: /node_modules/},
            {test: /\.vue$/, use: 'vue-loader', exclude: /node_modules/},
            {test: /\.css/, use: ['style-loader', 'css-loader']}
        ]
    },
    devServer: {
        port: '8111'
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/tpl/index.html'
        }),
        new VueLoaderPlugin()
    ]
}
...
/// 假定有个 app.vue 按如上设置
import '../style/app.css';

这时就可以通过 import 方式把样式文件导入到页面中，因为此时用的是 style-loader ，样式会写入到 <head> 下的 <style> 标签中

  • 如不喜欢那种在把样式一股脑掉到 <head> 的方式，可使用 mini-css-extract-plugin ，这会把相关样式拆分成一个个独立的文件
/// webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
...
{test: /\.css/, use: [MiniCssExtractPlugin.loader, 'css-loader']} // 替换 style-loader
...
plugins: [
    ...
    new MiniCssExtractPlugin({
    filename: "[name].css",
    chunkFilename: "[id].css"
  })
]
  • 如 import 多个文件，按目前的设置，会合并和一个样式文件导出，不过这些文件中的内容，只是简单的合并在一起，而且也没编程思想在其中，完全依赖样式编写人员控制每个样式文件的内容
/// app.css
.info {
    font-size: 24px;
}
...
/// color.css
.info {
    color: red;
}
...
/// app.vue
import '../style/app.css';
import '../style/color.css';
...
/// 合并出的样式文件如下
.info {
    font-size: 24px;
}
.info {
    color: red;
}

编程化

通过 .pcss 引入样式文件

.pcss 是 Postcss 的专用格式文件

  • 安装 postcss-import，使在 .pcss 文件可以使用 @import 引入样式文件

npm i --save-dev postcss-import

需要先添加一个对 Postcss 的运行配置文件，可以叫 .postcssrc.js 或 postcss.config.js

// 暂时没有其他配置，可以把留空
module.exports = {
    plugins: []
}

postcss.config.js 除了 plugins 还具有如下参数：

  • syntax: 提供语法分析器和字符串化器的对象
  • parser: 特殊的语法解析器（例如，SCSS）
  • stringifier: 特殊语法输出生成器（例如Midas）
  • map: 对map文件的设置
  • from: 输入文件名
  • to: 输出文件名

不过常用的就是 plugins （定义使用的插件）

/// 在webpack.config.js中做如下修改
{test: /\.pcss$/, use: [
    MiniCssExtractPlugin.loader,
    "css-loader",
    "postcss-loader"
]},
...
/// mian.pcss
@import './app.css';
@import './color.css';
...
/// app.vue 引入 main.pcss
import './main.pcss';

PostCss 的编程能力，是通过各种插件实现的，可以自己编写，或者直接使用社区现有插件，插件在 Postcss 的配置文件中设置使用参数

autoprefixer

这应该是postcss中使用最为广泛的插件了，自动识别设定的浏览器兼容范围，添加浏览器样式前缀

npm i --save-dev autoprefixer

/// postcss.config.js
let postcssConfig = {};
postcssConfig.autoprefixer = {
    browsers: ['> 1%', 'ff 3']
}

module.exports = {
    plugins: postcssConfig
}
  • 修改main.pcss内容如下
b {
    border-radius:5px;
}

编译运行后结果为

b {
       -moz-border-radius:5px;
            border-radius:5px;
}

autoprefixer 的参数，使用默认配置即可。这里只说 browsers 参数的设定，因为这关系到最终添加前缀的内容。

browsers 是利用 browserslist 功能来决定是否需要添加某些浏览器前缀，在browserslist的文档里我们可以找到详细设定，可以设定针对浏览器、国家、指定平台、年份做设置

> 5%
cover 99.5%
> 5% in US
node 10 and node 10.4
since 2015
ie 6-8
not ie <= 8

下面列举下在项目中最有可能碰到的浏览器

  • Android: Android webview浏览器
  • iOS: ios的Safari浏览器
  • Chrome: 谷歌浏览器
  • ChromeAndroid: 谷歌浏览器安卓版
  • Edge: 微软的Edge浏览器
  • ie: ie浏览器
  • Safari: Safari桌面浏览器
  • ff: firefox浏览器
  • and_ff: firefox安卓浏览器
  • and_qq: QQ浏览器安卓版
  • and_uc: UC浏览器安卓版

browsers 接收的是一个数组，所以可以像例子中那样分开设置，下面的话的意思就是为了适配 安卓2.3，ios3.2，Safari3.1，IE10 浏览器要添加相关前缀

'> 0%','Android 2.3','iOS 3.2','Safari 3.1','IE 10'

> 0% 是指当你不想像上面设置那么繁琐的指定浏览器时，可以直接指定个大概，就是我要支持市面上多少多少比例的浏览器，这个数字前面可以添加普通的运算符 >、>=、< 、<=

前缀修饰符 not 表示不在某个范围中，还可以使用 cover extends 或 since 进行更细化的设置，包括道指定从哪年开始的什么版本。

圆角功能是 ff4 才加的功能，我们指定适配某个浏览器版本，这时就会发现运行后的样式一样会有ff的私有前缀，所以一般我们结合浏览器覆盖范围，再加上对特定浏览器的排除就能完成相关设置

/// 如此设定后，生成的样式就不会有针对 火狐浏览器 的前缀
  browsers: ['> 1%', 'ff > 4']

有一点需要注意的，设置范围时需要指定范围，不能直接设置ff或者not ff，这时编译会报错，你需要明确指明版本才可以

在 package.json 中设置 browserslist

由于还会有其他插件（比如 babel ）需要针对浏览器设置兼容情况，所以针对浏览器的范围设定，一般会建议加上 package.json 中。
在其中，设置 "browserslist": ["> 1%", "ff > 4"]（package.json 中设定的优先级低于插件的设置）

postcss-preset-env

这个插件允许开发人员在当前项目中使用 css 将来版本可能会加入的新特性，这个就非常类似于写 ES6 的代码，但是使用 babel 转成 ES5 的代码。

这个插件中包含了autoprefixer

另外一个类似的插件，postcss-cssnext 已经不再维护

npm i --save-dev postcss-preset-env

// 新增
const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [
  postcssPresetEnv({ 
    stage: 2
    // browsers: 'last 2 versions' // 这个插件包含 autoprefixer 的功能，可以在配置中进行浏览器的相关设定
  })
  ]
}

插件参数说明

下面根据官方的文档介绍相关设置参数：

  • stage: 根据现行web标准的进程（主要就是 w3c 组织认定的标准，所以这个插件中具备的功能都是未来很有可能直接加到 css 标准中的内容）来决定某些 css 功能需不需要通过垫片的方式添加，可以设置 0～4 的任意数字，如果没有设置这个值，这个值默认为 2

    • 0: 这个阶段处在 非官方草案或编辑草案阶段，很有可能会被删除
    • 1: 这个阶段处于 实验阶段，有可能会被设置为标准
    • 2: 这个阶段处于 待定阶段，这也是插件默认的数值，处于这个阶段的功能，基本可以认为会被加到未来的标准中
    • 3: 这个阶段处于 稳定阶段，基本上已经有浏览器厂商实现了，可以直接使用
    • 4: 这个阶段处于 标准阶段

  • features: 针对特定css功能进行单独设置，比如设置了 stage 为 3，可以通过这个参数来特定使用还处于 stage为 2 的功能

postcssPresetEnv({
  /* 使用stage为3的标准，同时允许嵌套规则(嵌套是stage 0的标准) */
  stage: 3,
  features: {
    'nesting-rules': true
  }
})

  • browsers: 参加上面browserslist的介绍，就是设置浏览器的支持情况（不建议使用，直接在package.json 中设置）

  • insertBefore / insertAfter: 允许你在该插件运行之前或者之后运行某些插件，可以是一个或者多个

import postcssSimpleVars from 'postcss-simple-vars';

postcssPresetEnv({
  insertBefore: {
    'all-property': postcssSimpleVars
  }
})

  • autoprefixer: 设为 false 可以禁用该功能

  • preserve: 决定所有插件是否应接收同一个preserve选项，该选项可以保留或删除以其他方式填充的 CSS

  • importFrom: 从外部导入相关变量信息（如自定义媒体、自定义属性、自定义选择器和环境变量），这个导入的数据源可以是 css、js 或者 json （还支持函数和直接对象传值）。这个功能完全可以根据运行时的 ENV 和某些自己设置的参数，来决定最基础的变量参数，来进行换肤或者针对PC，H5单独出套 ui，这样能减少 ui 中样式的大小（如果本身使用的就是 postcss.config.js 的方式进行配置，可以把切环境的功能放到这个配置文件中，然后动态的加载不同的css）

postcssPresetEnv({
  importFrom: [
    /*
    @custom-media --small-viewport (max-width: 30em);
    @custom-selector :--heading h1, h2, h3;
    :root { --color: red; }
    */
    'path/to/file.css',

    /* module.exports = {
    customMedia: { '--small-viewport': '(max-width: 30em)' },
    customProperties: { '--color': 'red' },
    customSelectors: { ':--heading': 'h1, h2, h3' },
    environmentVariables: { '--branding-padding': '20px' }
    } */
    'and/then/this.js',

    /* {
    "custom-media": { "--small-viewport": "(max-width: 30em)" }
    "custom-properties": { "--color": "red" },
    "custom-selectors": { ":--heading": "h1, h2, h3" },
    "environment-variables": { "--branding-padding": "20px" }
    } */
    'and/then/that.json',

    {
      customMedia: { '--small-viewport': '(max-width: 30em)' },
      customProperties: { '--color': 'red' },
      customSelectors: { ':--heading': 'h1, h2, h3' },
      environmentVariables: { '--branding-padding': '20px' }
    },
    
    () => {
      const customMedia = { '--small-viewport': '(max-width: 30em)' };
      const customProperties = { '--color': 'red' };
      const customSelectors = { ':--heading': 'h1, h2, h3' };
      const environmentVariables = { '--branding-padding': '20px' };

      return { customMedia, customProperties, customSelectors, environmentVariables };
    }
  ]
});
  • exportTo: 与importFrom功能相反，这个是导出相关变量(这里应该是鼓励我们把变量都放在一个公共的文件下，这样便于维护)

stage 2及以上的css语法

就是开启默认配置可以直接使用的css语法

  • all: 定义元素的所有属性的重置的属性 [stage 3 下面以数字简写]
a  {
   all：initial ; 
}
  • :any-link 用于匹配锚元素的伪类，不管是否被访问(一般情况下a标签被点击后a标签会使用:visited的设置信息，这个的属性的设置不受影响) [2]
nav：any-link> span  {
   background-color：yellow ; 
}

  • break属性：用于定义多列布局中中断行为的属性 [3]

    • break-inside: 描述了在多列布局页面下的内容盒子如何中断
    • break-after: 描述在生成的盒子之后的页面，列或区域中断行为
    • break-before: 描述列或区域在生成的盒子之前应如何处理中断

  • case-insensitive attributes:(看不明白，看意思是不区分大小写) [2]

  • custom properties：用于定义CSS属性接受的自定义值 [3]

img {
  --some-length: 32px;

  height: var(--some-length);
  width: var(--some-length);
}
  • :dir伪类 基于方向性匹配元素的伪类 [2]
  • double-position-gradients: 圆锥形渐变[2]
.pie_chart {
  background-image: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
}
  • :focus-visible： 焦点可见的伪类 [2]
  • :focus-within： 处于焦点状态的伪类 [2]
  • font-variant： 设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小 [3]
  • gap属性 [3]

该属性是用来设置网格行与列之间的间隙（gutters），是row-gap 和 column-gap的简写形式

  • gray()： 用于指定完全去饱和颜色的功能 [2]
  • alpha：十六进制颜色表示法 比一般的3/6表示法，多1/2个字符，可以指定透明度 [2]
  • hwb()： 用于通过色调指定颜色然后将白度和黑度指定为混合的功能 [2]
  • image-set()： 根据用户分辨率指定引用不同的图像源 [2]
// resolve是postcss-assets的功能，下面有介绍
.foo {
    background-image: image-set(resolve('logo1x.jpg') 1x,
                                resolve('logo2x.jpg') 2x,
                                resolve('logo-print.jpg') 600dpi);
}
...
// become
.foo {
    background-image: url(resolve('logo.jpg'));
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.foo {
    background-image: url(resolve('logo.jpg'));
}
}
@media (-webkit-min-device-pixel-ratio: 6.25), (min-resolution: 600dpi) {.foo {
    background-image: url(resolve('logo.jpg'));
}
}
  • lab() 使用lab表示颜色 [2]
  • lch() 使用lch表示颜色 [2]
  • logical properties and values（流相对的属性和值） [2]
span:first-child {
  float: inline-start;
  margin-inline-start: 10px;
}
  • :matches 匹配伪类，可以一次设置多个属性值 [2]
p:matches(:first-child, .special) {
  margin-top: 1em;
}
  • :not 否定伪类，设置不在当前范围 [2]
p:not(:first-child, .special) {
  margin-top: 1em;
}
  • 媒体查询范围 使用普通比较符合定义范围 [3]
@media (width < 480px) {}

@media (480px <= width < 768px) {}

@media (width >= 768px) {}
  • overflow 溢出属性设置 [2]
  • overflow-wrap 定义是否在单词中插入换行符来防止溢出属性 [2]
  • place 定义对齐属性 [2]
  • rebeccapurple 一个特殊的颜色值 [2]
html  {
   color：rebeccapurple ; 
}
  • system-ui 匹配通用字体 [2]
body  {
   font-family：system-ui ; 
}

stage 1 的css语法

因为设定的stage为2，如果要启用需要在features配置中开启，对应的id可以在插件api中查看，对应的id就是英文加中划线，有感觉对不上的可以去对应github的js文件中查看

postcssPresetEnv({ 
    stage: 2,
    browsers: ['> 1%'],
    features: {
      'nesting-rules': true,
      'custom-media-queries': true,
      'custom-selectors': true
    }
})
  • 自定义媒体查询
@custom-media --small-viewport (max-width: 30em);

@media (--small-viewport) {
  h1 {font-size: 16px}
}
...
// 转码为
@media (max-width: 30em) {
  h1 {font-size: 16px}
}

最大最小宽度，可以使用>= <=代替

@custom-media --small-viewport (width >= 500px) and (width <= 1200px);

@media (--small-viewport) {
  h1 {font-size: 16px}
}
...
// 转为
@media (min-width: 500px) and (max-width: 1200px) {
  h1 {font-size: 16px}
}
  • 自定义选择器

CSS 扩展规范（CSS Extensions）中允许创建自定义选择器，可以使用@custom-selector”来定义自定义选择器

@custom-selector :--heading h1, h2, h3, h4, h5, h6;
 
:--heading {
 font-weight: bold;
}

运行后变为

h1,
h2,
h3,
h4,
h5,
h6 {
 font-weight: bold;
}

stage 0的css语法

  • 嵌套(使用的场景很多，也一并开启使用)

减少重复的选择器声明，通过两种方式进行嵌套：第一种方式要求嵌套的样式声明使用“&”作为前缀，“&”只能作为声明的起始位置；第二种方式的样式声明使用“@nest”作为前缀，并且“&”可以出现在任意位置

// 嵌套只能使用&开头，除非前缀有@nest
.message {
 font-weight: normal;
 & .header {
   font-weight: bold;
 }
  @nest .body & {
   color: black;
 }
}

运行后

.message {
 font-weight: normal
}
.message .header {
 font-weight: bold;
}
.body .message {
 color: black;
}

postcss-assets

引用外部资源时，可以通过这个插件设置资源查找路径，简化在样式文件中插入图片的操作

安装

npm i --save-dev postcss-assets

// 设置loadPaths指定查找路径
assets({
  loadPaths: ['src/images']
}),

这时如果在main.css的文件中，如果这么设置一个类

// 配置resolve,指定在查找路径下,搜索图片
.logo {
 background-image: resolve('logo.jpg');
}
...
// 编译后会变成，自动识别了
.logo {
 background-image: url('/src/images/logo.jpg');
}

这里会要求图片是目录下是存在的，如果不存在进行编译时会报错，loadPaths 是个数组，相当于是多个搜索的目录，只要图片在某一个目录下即可，不过从编译时性能角度来考虑，一定不可以设置过多的目录，否则一定会影响编译速度

postcss-assets 还有其他几项设置：

  • basePath: 如果postcss.config.js不在项目的根目录可以使用这个参数就行修改，比如我这里，就是把配置文件在根目录下，这样我在设置loadPaths时，不用再去考虑其他路径的问题，可以从当前位置，直接设置图片目录为src/images，一般这种配置文件感觉放在根目录最好，这样可以很方便别人查看
  • baseUrl: 没特别弄明白这参数是什么意思，好像是在服务器运行时，设置url，不过理解不了，部署到生产环境的代码，肯定时编译后的代码，不能在线上再实时编译吧。。。
  • cachebuster: 是否设置缓存，默认是false
// 比如如果设为true，图片后就会加一串hash值
.logo {
 background-image: url('/src/images/logo.jpg?1637e45dd90');
}
  • loadPaths: 设置查找特定目录
  • relative: 和URL解析有关，没试出来做什么用的。。。使用默认的false，禁用相对url解析
  • cache: 默认为false，如果引入文件没有发生变化，则有限使用缓存文件，感觉应该和cachebuster配套使用，能提升编译速度

另外这个插件，还支持通过图片进行相关设置

  • inline: 是把图片转成base64文件，估计要慎用，如果图片很多的话，会影响编译速度
  • width: 是获取一张图片的宽度，height是获取一张图片的高度
.logo {
 background-image: inline('logo.jpg');
 width: width('logo.jpg');
 height: height('logo.jpg');
}
...
// 运行后
.logo {
 background-image: ...base64的图片
 width: 493px;
 height: 448px;
}

cssnano

webpack4+ 的版本，已经集成了cssnano，mode 设为生产模式就会自动启用这个插件

npm install --save-dev cssnano

// 如果单独使用，可以这么配置
module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

使用 postcss 实现一个 sass

postcss 可自主定义相关插件的使用，组合出适合自己使用的功能，借助 postcss 的插件来实现一个类 sass

相关插件介绍

  • postcss 基础功能包
  • postcss-advanced-variables 提供嵌套类似 sass 的变量、@if、@else、@for、@each、@mixin、@include、@content
  • postcss-scss 使 postcss 中可以正常使用 sass 中的 #{$var-name} 变量形式
  • postcss-apply
  • postcss-assets
  • postcss-import 使在.pcss文件可以使用@import引入样式文件
  • postcss-preset-env 一个对未来css语法规则，实现比较好的插件
  • postcss-cli 提供了终端运行的能力

@import

使用 postcss-import 插件

const atImport = require("postcss-import");
module.exports = {
  plugins: [
    atImport(),

元素嵌套

使用 postcss-preset-env 插件 stage:0 中的 nesting-rules

require('postcss-preset-env')({
    stage: 2,
  browsers: ['> 1%'],
  features: {
    'nesting-rules': true
  }
})

具体写法上和sass嵌套的写法有些不一样，不过这种写法是未来css的标准，以这个为主要写法

nav {
  & ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  & li {
    display: inline-block;
  }

  & a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    & span {
      color: $red;
    }
  }
}

变量、@if、@else、@for、@each、@mixin、@include、@content

使用 postcss-advanced-variables 这个插件，这个插件能实现sass变量的大部分功能，不过一个特殊的语法#{$var-name}需要使用到 postcss-scss 这个插件，并且在postcss.config.js 中设置 parser 为 postcss-scss

const advanced = require("postcss-advanced-variables");
module.exports = {
  parser: "postcss-scss",
  plugins: [
    advanced(),
    ...

// 变量
$font-size: 1.25em;
$font-stack: "Helvetica Neue", sans-serif;
$primary-color: #333;

body {
  font: $font-size $(font-stack);
  color: #{$primary-color};
}
...
// 转为
body {
  font: 1.25em "Helvetica Neue", sans-serif;
  color: #333;
}

// @if、@else
$type: monster;
 
p {
  @if $type == ocean {
    color: blue;
  } @else {
    color: black;
  }
}
...
// 转为
p {
    color: black
}

// @for
@for $i from 1 through 5 by 2 {
  .width-#{$i} {
    width: #{$i}0em;
  }
}
...
// 转为
.width-1 {
    width: 10em;
  }
.width-3 {
    width: 30em;
  }
.width-5 {
    width: 50em;
  }

// @each
@each $animal in (red, yellow, black, white) {
  .#{$animal}-icon {
    color: #{$animal};
  }
}
...
// 转为
.red-icon {
    color: red;
  }
.yellow-icon {
    color: yellow;
  }
.black-icon {
    color: black;
  }
.white-icon {
    color: white;
  }

// @mixin @include
@mixin heading-text {
  color: #242424;
  font-size: 4em;
}
 
h1, h2, h3 {
  @include heading-text;
}
...
// 转为
h1,
h2,
h3 {
  color: #242424;
  font-size: 4em;
}

属性嵌套

postcss-nested-props

const nestedProps = require("postcss-nested-props");
module.exports = {
  plugins: [
    nestedProps(),

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
...
// 转为
.funky {
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold
}

Extend/Inheritance(扩展/继承)

postcss-extend

const extend = require("postcss-extend");
module.exports = {
  plugins: [
    extend(),

// 这里和sass有点不同，使用 @define-placeholder 而非 % 导出样式块
@define-placeholder message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend message-shared;
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
...
// 转为
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

添加calc()计算

postcss-calc

const calc = require("postcss-calc");
module.exports = {
  plugins: [
    calc(),

@mixin columns_calc($count) {
  width: calc(100% / $count);
  @if $count > 1 {
    float: left;
  }
}
.column_calculated {
  @include columns_calc(2);
}
...
// 转为
.column_calculated {
  width: 50%;
  float: left;
}

添加了这些插件，基本就可以完全可以满足正常开发需求

完整配置如下:

const postcssPresetEnv = require("postcss-preset-env");
const atImport = require("postcss-import");
const advanced = require("postcss-advanced-variables");
const nestedProps = require("postcss-nested-props");
const extend = require("postcss-extend");
const calc = require("postcss-calc");
module.exports = {
  parser: "postcss-scss",
  plugins: [
    atImport(),
    advanced(),
    nestedProps(),
    extend(),
    calc(),
    postcssPresetEnv({
      stage: 2,
      browsers: "> 3%",
      features: {
        "nesting-rules": true
      }
    })
  ]
};

独立使用postcss

可以通过 postcss-cli 这个插件构建一个独立使用的 css 处理平台，可在 package.json 中添加如下命令

  "scripts": {
    "build:pc": "npx postcss src/main.pc.css -o dist/main.pc.css",
    "build:h5": "npx postcss src/main.h5.css -o dist/main.h5.css"

// src/main.pc.css
@import 'normalize.css';
@import 'reset.css';
@import 'variables.css';
@import 'common.css';
@import 'common.mixin.css';
@import 'layout.mixin.css';
@import 'layout.css';
@import 'layout-flex.css';
@import 'button.mixin.css';
@import 'button.css';
@import 'button-group.css';
@import 'skeleton.mixin.css';
@import 'skeleton.css';
@import 'breadcrumb.css';
@import 'dropdown.css';
@import 'menu.css';
@import 'pagination.mixin.css';
@import 'pagination.css';
@import 'step.css';
@import 'checkbox.css';
@import 'cascader.css';
@import 'form.css';
@import 'calendar.css';
@import 'input-number.css';
@import 'rate.css'

这里由一个统一入口文件，控制针对PC，H5不同的样式表的输出，在入口文件中，可以设置引入不同的变量（比如上面例子中的 variables.css 正常开发中，可以细化成variables.pc.css或者variables.orange.css 这类的样式），让换肤类的功能也比较容易实现

避免编译器对pcss文件报错

我使用的是我使用的是vscode，引用插件后写的样式，编译器基本是不认识的，会给你报错，所以这里说下如何避免对pcss的报错，其他编译器应该也有类似的方法

对vscode添加对.pcss文件的支持

  • 安装postcss-sugar-language插件
  • 进入setting，搜索files.associations在其中添加如下内容
"*.css": "postcss"

设置 "postcss.validate": false，避免检查器对 pcss 进行检查

css module

（参考CSS in JS 简介）
css module 和 css in js 都是社区针对 css 作用域提出的解决方案，从实际开发过程中，感觉 css module 的方式，更适合分工合作的要求。

现在开发中，不管你使用什么框架，基本的流程大概都是：先做静态页面，再接动态数据。这里很容易就会形成两条工作线：一类专门进行重构，与设计师、交互对接完成视觉实现；另一类专门与产品经理、后端对接业务需求（体量大的公司会拆分成两个工种，小公司自然是全干了，但是工作场景多半如此）。

css in js 的方式，更符合独立组件的封装型。从样式、逻辑到内容展现，在一个 js 中都实现，不需要再引入其他文件，如果是写 ui 组件这种方式是极好的。

但是如果是正常的开发需求，你用这种方式，就表示样式问题的改动、修复，业务逻辑的实现，都是在一个文件中进行，不利于分工合作。

个人感觉 css in js 方式会让 js 文件变得混乱，可读性下降（正常开发就算是状态管理，一般都会被拆分成一个个独立的文件）。而且没办法单独输出样式文件，没办法把样式文件丢在某个 cdn 服务器下，也影响组件的复用性。如果要复用某个组件（业务组件）就表示要接受这个组件自带的样式，稍微调整点字号颜色啥的，就要单独加个接收参数，或者新建个类似 list-red 的新组件（如果是引入样式的方式，完全可以通过再引入这个组件的外层加个类似 <div class='red-list'><list /></div>，在外层样式文件中直接控制，也很容易扩展多个不同样式、换肤啥的）。

css in js 方式对重构人员也不友好，他们之前查看样式问题，直接修改样式文件部署后就能看出问题能不能解决，现在需要修改 js 文件等js文件部署后才能查看改动是否生效（如果再碰到分支不同，版本不同的情况，那更热闹了。。。）

启用

参考了 CSS Modules 用法教程

配合 css-loader 使用，在 webpack 配置项中如下设置：

{test: /\.pcss/, use: [MiniCssExtractPlugin.loader, 'css-loader?modules', 'postcss-loader']}，

这样就开启了 css module，它的使用会把对应的样式名变成一种有规律，但不可预期的名称，比如

/// main.pcss
/// 由于样式文件本身并没有要求 .classname 不能重复，所以要自己保证不要重复，否则针对同一类名会转出多个变量名，在使用时会有问题
.box {
    border-radius:5px;
}
.info {
    color: red;
    font-size: 24px;
}
...
/// app.vue
<template>
    <div :class="$style.info">{{ msg }}</div>
</template>
import style from '../style/main.pcss';
...
computed: {
  $style () {
    return style;
  }
}

$style 的使用方式参考了 vue-loader 的 CSS Modules 方案，vue loader 会使用 $style 的计算属性，向组件注入 CSS Modules 局部对象

style 会输出为（value 值是一个动态值）

{box: "_2sI8WybUY_1NGPVWmXjdbV", info: "_hA0iOLbXZy9PpOuCjpkc"}

组件内直接使用其中的定义的样式名，会自动替换成这些名称，样式文件也会自动转成这些名称，这样可以解决 css 的样式冲突（污染）的问题，全局污染的问题，也可以算是解决依赖的问题，组件只需要引入自己相关的样式，在这个相关样式文件中定义自己需要使用的样式，再通过 $style 的形式给相关组件使用。

vue 的写法稍微麻烦点（如果用 JSX 会简单些），如果是在 react 中可以直接使用

import style from '../style/main.css';

class App extends Component {
    render () {
        return <div className={style.info}>app info</div>
    }
}

全局作用域

在引入的样式文件中，默认会对所有样式进行转换，如果你的样式只是想通过普通方式使用，可以有两种方案：

  • 只针对 .pcss 开启 css module，.css 不开启
/// webpack.config.js
{test: /\.css/, use: [MiniCssExtractPlugin.loader, 'css-loader']},
{test: /\.pcss/, use: [MiniCssExtractPlugin.loader, 'css-loader?modules', 'postcss-loader']}
...
/// global.css
body {
    font-size: 18px;
    background: #cccccc;
}
...
/// app.vue
import '../style/global.css';
import style from '../style/main.pcss'; // 这里虽然是分开导入，但是最终会合并和一个样式文件
...
/// main.css 导出的样式文件
body {
    font-size: 18px;
    background: #cccccc;
}
._2sI8WybUY_1NGPVWmXjdbV {
    border-radius:5px;
}
._hA0iOLbXZy9PpOuCjpkc {
    color: red;
    font-size: 24px;
}
  • 在待编译的样式文件使用 :global(.className) （也可以省略为 :global .className）的写法，这样这个对应的样式也不会编译

:local 可以设置哪些需要转，因为默认就是转换，没必要再加一层说明其需要转换

对于需要转换的，请一直使用 .classname，不要使用 id

/// main.pcss
...
:global(body)  {
    font-size: 18px;
    background: #cccccc;
}

Composing(组合) 及 Importing(导入)

组合的意义并不是把样式代码进行混合，而是在于使用了组合的类名，在引用时会包含其组合的子类

.box {
    border-radius:5px;
}
.info {
    color: red;
    font-size: 24px;
}
.foo {
    composes: box;
    composes: info;
    padding: 10px;
}
/// 经过转换后对应的json信息如下
box: "src-style-main__box--2sI8W",
info: "src-style-main__info--_hA0i",
foo: "src-style-main__foo--LiN2X src-style-main__box--2sI8W src-style-main__info--_hA0i",
/// 如果我们使用 $style.foo 还会包含其他两个子类的内容

composes 还可以从其他样式模块中导入样式进行组合

.foo {
    composes: main-title header-title from './color.css';
    padding: 10px;
}

@value

css 变量的解决方案很多，这个是 css-loader 的方案

官方有个命名建议：v- 定义value值, s- 选择器 m- 定义 media 规则

@value v-primary: #BF4040;
@value s-black: black-selector;
@value m-large: (min-width: 960px);

.header {
  color: v-primary;
  padding: 0 10px;
}
:global .s-black {
  color: black;
}
@media m-large {
  .header {
    padding: 0 20px;
  }
}

定制编译后的类名

css-loader 默认的哈希算法是 [hash:base64]，转出的就是这种 _2sI8WybUY_1NGPVWmXjdbV，这个转换后的名称是可以定制的

// 参数比较长，再使用拼接的写法，看起来不美观
loader: 'css-loader',
options: {
  modules: {
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  } // 注意是在 modules 下设置 localIdentName
}

按官方建议

  • 开发环境使用 [path][name]__[local]--[hash:base64:5]
  • 生产环境使用 [hash:base64]

这样转出的类名就类似 src-style-main__box--2sI8W，能看出路径和使用模块，方便定位样式问题所在的

css loader 参数

名称 类型 默认 描述
url {Boolean|Function} true 启用/禁止 url() 功能
import {Boolean|Function} true 启用/禁用 @import 处理
modules {Boolean|String|Object} false 启用/禁用 CSS Modules 以及相关配置
sourceMap {Boolean} false 启用/禁用 map 功能
importLoaders {Number} 0 在 css-loader 之前使用多少个加载器（默认，别去动这个值，按 webpack 中的设置的 use 顺序去执行使用 loader）
localsConvention {String} 'asIs' 导出的 JSON 对应的 Key 的规则
onlyLocals {Boolean} false 影响打包时的 loader 顺序，一些 SSR 场景下可以需要设置这个值，一般情况下别用
esModule {Boolean} false 是否启用 es module

url

/// 先安装 url-loader 处理图片，并添加相关配置信息
{
  test: /\.(png|svg|jpg|jpeg|gif)$/,
  use: "url-loader"
},
...
/// main.pcss
.foo {
  color: red;
  font-size: 14px;
  background: url("../image/timg.jpeg"); // 此处设定了背景图
}

按如上设置，转换出的 css 会对图片进行处理，但如果设置这个值为 false

{
  loader: "css-loader",
  options: {
    modules: true,
    url: false // 这个值默认是 true
  }
},

转换出的 css 就不会对 url() 进行处理，原样输出

/// 不如处理 background: url("../image/timg.jpeg");
/// 这个 url 还可以设置为函数，在这里可以控制，只有指定图片名会转，进行差异化处理
url: (url, resourcePath) => {
    // url ../image/timg.jpeg
  // resourcePath - css 的绝对路径

  // 不处理 `img.png` urls
  if (url.includes('img.png')) {
    return false;
  }

  return true;
},

import

这个值和 url 功能类似，只不过这里是控制文件的导入导出，这个值也一样可以设置 true 或 false，如果这样直接设置，那这肯定有问题，这个参数要么不设置，要设置一定是要对url进行过滤

/// @import "./color.css";
import: (parsedImport, resourcePath) => {
    // parsedImport { url: './color.css', media: '' }
  // parsedImport.url - `@import` 文件时对应的路径 
  // parsedImport.media -  `@import` 媒体查询时对应的路径
  // resourcePath - css 文件的绝对路径

  // 包含 `style.css` 不进行合并处理
  if (parsedImport.url.includes('style.css')) {
    return false;
  }

  return true;
},

@import 是一个广泛被支持的 css 属性，大于 IE9 的浏览器就可以正常使用

modules

true 或 false 启用/禁止（还可以通过设置 modules 的值为 'local' 或 'global'启用/禁止） css modules

前面提到的 :global :local、Composing Importing 、@value、localIdentName 都是 modules 的配置信息，modules 可以接收一个对象进行其他配置

modules: {
  mode: 'local', // 设置 local 启用 global 禁用 css 模块
  exportGlobals: true,
  localIdentName: '[path][name]__[local]--[hash:base64:5]', // 编译后的类名
  context: path.resolve(__dirname, 'src'),
  hashPrefix: 'my-custom-hash',
},
  • mode 除了 local global 外，还有一个值是 pure，使用这个值就要求样式文件中必须是纯的选择器，不能使用 global local 进行包裹
/// 在 mode 为 pure 时，会提示编译出错
 :local(.zoo)
...
/// mode 还可以接受一个函数形式，对指定路径的样式文件进行特殊处理（什么文件开启转换，什么文件不开启），返回值只能是这三个值
mode: (resourcePath) => {
  if (/pure.css$/i.test(resourcePath)) {
    return 'pure';
  }

  if (/global.css$/i.test(resourcePath)) {
    return 'global';
  }

  return 'local';
},

  • exportGlobals 按描述应该是控制输出类名的名称，不过没没查出有什么特别的用处，设不设都不影响使用

  • context 生成hash值相同，参考那个 GitHub bug 说明，是在某些情况下，生成的hash值出现重复的情况，然后借助这个参数，解决此问题，不过我试了很多情况，没试出来生成 hash 相同的情况

  • hashPrefix 设定组自己的 hash 值规则，一般无须设置

  • getLocalIdent 设置编译后的规则名，同 localIdentName 只不过这是个函数，能设置的更细，一般用 localIdentName

  • localIdentRegExp 没试出干什么用

localsConvention

这个设定导出 JSON 时，key值和类名如何映射，默认值是 'asIs'

loader: 'css-loader',
options: {
  modules: {
    mode: 'local',
    localIdentName: '[path][name]__[local]--[hash:base64:5]'
  },
    localsConvention: 'asIs'
}
...
.infoNews {
    font-size: 35px;
}
.info-old {
    color: white;
}
.info_dashes {
    color: salmon;
}
.info {
    color: red;
}
...
/// 默认 asIs，类名是啥，导出的就是啥
info: "src-components-page1-index__info--10GK2"
info-old: "src-components-page1-index__info-old--k163w"
infoNews: "src-components-page1-index__infoNews--1uma1"
info_dashes: "src-components-page1-index__info_dashes--FVVUn"
...
/// camelCase 驼峰，会把非驼峰的命名转为驼峰，并保留之前的类名
info: "src-components-page1-index__info--10GK2"
info-old: "src-components-page1-index__info-old--k163w"
infoDashes: "src-components-page1-index__info_dashes--FVVUn" // 值同 info_dashes
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w" // 值同 info-old
info_dashes: "src-components-page1-index__info_dashes--FVVUn"
...
/// camelCaseOnly 与驼峰类似，只不过不会保留非驼峰的转换
info: "src-components-page1-index__info--10GK2"
infoDashes: "src-components-page1-index__info_dashes--FVVUn"
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w"
...
/// dashes 一样也是转驼峰，只不过这里限制只转 ``-`` 号
info: "src-components-page1-index__info--10GK2"
info-old: "src-components-page1-index__info-old--k163w"
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w"
info_dashes: "src-components-page1-index__info_dashes--FVVUn" // 不转换
...
/// dashesOnly 不保留转换前的
info: "src-components-page1-index__info--10GK2"
infoNews: "src-components-page1-index__infoNews--1uma1"
infoOld: "src-components-page1-index__info-old--k163w"
info_dashes: "src-components-page1-index__info_dashes--FVVUn"

之所以会有这么个参数，是因为我们在使用 css modules 时，最终可能会动态绑定到某个组件上，这是为了方便在 js 中使用

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 211,948评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,371评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,490评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,521评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,627评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,842评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,997评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,741评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,203评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,534评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,673评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,339评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,955评论 3赞 313
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,770评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,000评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,394评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,562评论 2赞 349