1. 说明

在使用less进行样式编写的过程中，会遇到很多坑。比如样式覆盖、复用、性能等问题。

本文的宗旨就在于将已知的坑告知大家，并给出一些解决方案来【解决】或者【规避】这些坑。

若对less已经很熟，只需看$\color{lightskyblue}{特殊说明}$的内容，$\color{red}{官方说明}$的可以忽视。

---

2. 语法

2.1 转义

$\color{coral}{官方说明}$

$\color{lightskyblue}{特殊说明}$

• 常用实例

width: calc(~'100% - 40px');

---

2.2 变量

$\color{coral}{官方说明}$

$\color{lightskyblue}{特殊说明}$

• 变量需要动态拼接的时候，可以将变量用大括号{}包裹

@table-prefix-cls: ~'@{ant-prefix}-table';

.@{table-prefix-cls} .@{table-prefix-cls}-scroll .@{table-prefix-cls}-body,
.@{table-prefix-cls} .@{table-prefix-cls}-content > .@{table-prefix-cls}-body {
  max-height: unset;
  height: unset;
  overflow-y: unset;
  min-height: 200px;
}

---

2.3 混合

$\color{coral}{官方说明}$

$\color{lightskyblue}{特殊说明}$

• 若不希望被混合的内容单独出现在css样式中，则给样式后面添加()

// 定义时
.single-ellipsis() {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 使用时
.homePage_title {
  font-size: 15px;
  font-weight: bold;
  .single-ellipsis();
}

---

2.4 嵌套

$\color{coral}{官方说明}$

$\color{lightskyblue}{特殊说明}$

• &表示父选择器

.father {
  color: #ccc;
  &.angry {
    color: red;
  }
  &:hover {
    color: yellow;
  }
  .son {
    color: black;
  }
}

• > ~ 等正常使用

.father {
  color: #ccc;
  > .son {
    color: black;
  }
  ~ .brother {
    color: yellow;
  }
}

---

3. 关键点

3.1 尽量不要使用!important

• !important会导致样式$\color{red}{覆盖灾难}$，因为能覆盖!important的只能是!important
• !important会导致覆盖未料想到的样式，因为层级不同的地方可能有样式名称一样的样式
• antd等第三方样式的覆盖，请参考下面的:global使用手册
• 若因为层级太深导致权重较高的，考虑使用更高的权重进行覆盖

---

3.2 :global使用

• 不要在根样式节点上使用，会造成全局覆盖污染，同时若自身是$\color{red}{微前端模式}$，会污染主基座项目
• 请在:global外层包裹样式，类似圈定作用域

  .tableListForm {
    :global {
      .@{form-prefix-cls}-item {
        margin-bottom: 8px;
        margin-right: 0;
        display: flex;
        display: -ms-flexbox;
        > .@{form-prefix-cls}-item-label {
          width: auto;
          line-height: 32px;
          padding-right: 8px;
        }
      }
    }
  }
  

---

3.3 namespace模式

有时候无法使用:global进行全局覆盖，或者全局覆盖会产生问题。

• 浮层或无法有效获取到父节点
• classname冲突

$\color{seagreen}{使用特殊的classname}$：xxx-xxx-xxx__title、xxx-xxx-xxx-title__content这样的命名方式进行classname的命名