css模块化

之前写的APP样式有点混乱，想要重构一下（跟重写差不多），就了解了一波css模块化，做个小记录~
css-module(css模块化)：
1.css里面也存在作用域，css模块化可利用:globle 来定义全局css;使用：local来定义局部css(local其实就等同于.类名),局部的css在module模块化的时候会将类名编译成类名后缀带有字符串的，这就保证了每个模块拥有唯一的类名，只能该模块使用。

实例：
  :global(.title) {   // 全局:模块均可使用，原样输出
    color: green;
  }
  :local(.titles) {  // 局部：只在该模块内使用，后缀有字符串，可唯一标识性
    color:pink;
  }

2.css module使用compose关键字来实现一个类继承另一个类的样式：

 示例1：title类去继承className类的样式：
  .className {
    background: orange;
    font-size: 36px;
    color:red;
  }
  .title {
    compose:className;
  }
  示例2:index.css继承另一个css文件中某个类的样式
  .title {
    composes: className from './another.css';
    color: red;
  }

3.使用变量:
需要先下载依赖包：npm i --save postcss-loader postcss-modules-values
在webpack.config里面配置：
var values = require(‘postcss-modules-values’);
在module里面配置上一行： postcss: [values],

 示例：
  创建一个color.css，在里面设置变量
   @value blues: #4E0B0B;
   @value reds: #3348CF;
   @value greens: #38E621;    // 变量名blues  reds  greens可自行修改

  在index.css里面使用color.css中的变量
   @value colors: "./colors.css";     // 引号里面是相对路径
   @value blues, reds, greens from colors;  // 这里你的名字要跟文件里面的变量一致

    .title {
      color: reds;
      background-color: blues;
    }

刚看完的时候我觉得css-module跟less蛮像的，但不是一个东西。css模块化跟less的区别：用过less的都知道在less里面也可以定义变量、使用函数、继承等，但是less只是css的一种预处理器，他解析过后的本质还是css，使用less只是为了提高代码复用性跟简化css的结构，从而提高开发效率；而css模块化可以看做是webpack的一个插件，为某个组件或者某个单独的盒子设置局部的css样式，如果项目中存在多个组件且样式不统一，模块化是个不错的选择，可以避免样式污染跟类名重复的问题。