开发学院

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

教程正文

LESS重复检测

LESS重复检测

  LESS无法检测重复的选择器

例子

<!--extend_syntax.htm-->
<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   <body>
      <div class = "cont-main">
         <p>Welcome to TutorialsPoint</p>
         <div class = "style">
            <ul>
               <li>SASS </li>
               <li>LESS</li>
            </ul>
         </div>
      </div>
   </body>
</html>

  接下来创建style.less文件.

/*style.less*/
.cont-main,
.style {
   font-family: "Comic Sans MS";
   font-size: 30px;
}
.cont-main {
   font-size: 30px;
}
.cont:extend(.cont-main, .style) {}

  使用下面命令编译less文件

lessc style.less style.css

  得到css文件

/*style.css*/
.cont-main,
.style,
.cont,
.cont {
   font-family: "Comic Sans MS";
   font-size: 30px;
}
.cont-main,
.cont {
   font-size: 30px;
}

输出

  执行以下步骤:

  •   保存上面的HTML代码在 extend_syntax.html文件。

  •   在浏览器中打开该HTML文件,得到如下输出显示。

less-extend-output10.jpg