开发学院

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

教程正文

LESS 导入

LESS 导入

  Import用于导入 LESS 或 CSS 文件的内容。

例子

<html>
   <head>
      <title>Less Importing</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
   </head>

   <body>
      <h1>Example using Importing</h1>
      <p class = "myclass">LESS enables customizable, 
      manageable and reusable style sheet for web site.</p>
      <p class = "myclass1">It allows reusing CSS code and 
      writing LESS code with same semantics.</p>
      <p class = "myclass2">LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.</p>
   </body>
</html>

  创建myfile.less文件.

/*myfile.less*/
.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

 创建style.less文件.

/*style.less*/
@import "http://www.kaifaxueyuan.com/less/myfile.less";
.myclass2 {
   color: #FF0000;
}

  将从路径 http://www.kaifaxueyuan.com/less/myfile.less 导入 myfile.less 到 style.less 

  编译less文件

lessc style.less style.css

  得到css文件

/*style.css*/
.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

输出

 执行以下步骤,看看上面的代码工作:

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

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

importing.jpg