Question

从这个小节开始我们开始学习有关属性操作有关的语法，本章节我们主要介绍属性合并的使用方法。属性合并主要为了解决引入 mixins 时存在两个同样的属性值冲突时的处理方式。

默认情况下两个属性值会同时编译到目标样式类中，如果需要将属性值进行合并整合就需要用到我们本章节学习的知识。

1. 语法定义

官方定义： Combine properties .

慕课解释： 合并属性值 。

2. 方法详情

合并功能允许将多个属性中的值合并到一个属性的列表中，值用 , 或者空格分隔开。

3. 使用场景

合并（merge）主要应用于列表属性的整合，比如 box-showdow、transfrom 等属性。

4. 示例

4.1 逗号分隔

使用合并功能之前需定义一个 mixin 并在需要合并的属性后加上 + ，然后在引入 minxin 后在被合并的属性后也加上 + 。

• 输入代码

.mixin() {
  box-shadow+: 0 0 10px #333;
}

div {
  .mixin();
  box-shadow+: 0 0 20px black;
}

• 输出代码

div {
  box-shadow: 0 0 10px #333, 0 0 20px black;
}

4.2 空格分隔

使用步骤同逗号分隔，将属性后的符号改为 +_ 即可。

• 输入代码

.mixin() {
  transform+_: scale(2);
}

div {
  .mixin();
  transform+_: rotate(15deg);
}

• 输出代码

div {
  transform: scale(2) rotate(15deg);
}

小结

本章节我们介绍了合并，合并主要用于相同属性的合并联接，为了避免任何意外的联接，合并要求在每个联接的属性声明上使用显式的 + 或 +_ 标志。