开发学院

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

教程正文

LESS 经典用例

LESS 经典用例

  经典的使用情形是为了减少代码量。

例子

<!--extend_syntax.htm-->
<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <div class = "cont">
         <h2>Welcome to TutorialsPoint</h2>
         <p>The largest Tutorials Library on the web.</p>
      </div>
   </body>
</html>

  接下来创建style.less文件

/*style.less*/
.style {
   font-family: "Times New Roman";
   font-style:italic;
}

.cont {
   &:extend(.style);
   font-family: "Comic Sans MS";
}

  使用如下命令编译less

lessc style.less style.css

  得到css文件

/*style.css*/
.style,
.cont {
   font-family: "Times New Roman";
   font-style: italic;
}

.cont {
   font-family: "Comic Sans MS";
}

输出

  执行以下步骤:

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

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

less-extend-output11.jpg