📜  在 LESS 中转义有什么用?

📅  最后修改于: 2022-05-13 01:56:45.252000             🧑  作者: Mango

在 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;
  }
}


CSS
/* CSS Code file */
.content {
  font-size: 1em;
}
@media (orientation : landscape) {
  .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;
  }
}

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