在 LESS 中转义有什么用？

在本文中，我们将了解 LESS 中转义的概念以及如何在将生成相应 CSS 代码的 LESS 代码中实现和使用它。通过使用 CSS 预处理器语言，即 LESS，这有助于降低编写 CSS 的代码复杂性。在 LESS 中转义有助于我们使用任意字符串作为 CSS 属性或值。基本上可以将其称为变量，但转义有很大不同。与变量不同，我们可以只存储值，在转义中，我们可以在任何字符串中存储一个完整的属性。

句法：

@name : ~ “ .. ”

示例 1：本示例使用转义功能根据屏幕宽度呈现 CSS。

/*LESS Code file*/

@mediacondition : ~"min-width:600px";
.content{
   font-size: 1em;
   @media (@mediacondition){
      background-color: gold;
   }
}

输出：将代码编译为原生 CSS 后，将生成以下 CSS 文件。

CSS

/* CSS code */
.content {
  font-size: 1em;
}
@media (min-width:600px) {
  .content {
    background-color: gold;
  }
}

示例 2：此示例使用转义功能根据方向呈现 CSS。

/*LESS Code file*/

@res: ~'orientation : landscape';
.content{
    font-size: 1em;
   @media (@res) {
      background-color: gold;
   } 
    
}

输出：编译上述代码后，将生成以下 CSS 代码。

CSS

/* CSS Code file */
.content {
  font-size: 1em;
}
@media (orientation : landscape) {
  .content {
    background-color: gold;
  }
}

因此，转义被证明是一个非常有用的功能，通过它我们可以将整个属性保留为单个对象，该对象可以在代码中多次使用，以使其简短易懂。