开发学院

您的位置:首页>教程>正文

教程正文

LESS 防护比较运算符

LESS 防护比较运算符

  LESS包含五个保护比较运算符:<, >, <=, >= 和 =.您可以使用比较运算符(=)来比较数字、字符串、标识符等,其余的运算符只能与数字一起使用。

例子

<!doctype html>
   <head>
      <title>Guard Comparison Operators</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Guard Comparison Operators</h2>
      <p class = "myclass">Hello World!!!Welcome to Tutorialspoint...</p>
   </body>
</html>

  接下来创建style.less文件.

/*style.less*/
.mixin (@a) when (@a = 20px){
color:red;
}

.mixin (@a) when (@a < 20px) {
   color:blue;
}

.mixin (@a) {
   font-size: @a;
}

.myclass { .mixin(20px) }

  使用下面命令编译less文件

lessc style.less style.css

  得到css文件

/*style.css*/
.myclass {
   color: red;
   font-size: 20px;
}

输出

  执行下面步骤:

  •   把上面代码另存为guard_comparison_operators.html.

  •   用浏览器打开这个html文件,观察结果

guard_comparison_operators.jpg