📌  相关文章
📜  LESS-导入

📅  最后修改于: 2020-10-22 07:07:31             🧑  作者: Mango

 

描述

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

例

以下示例演示了在LESS文件中导入的用法-

Less Importing
      
   

   
      
Example using Importing

      
LESS enables customizable, 
      manageable and reusable style sheet for web site.

      
It allows reusing CSS code and 
      writing LESS code with same semantics.

      
LESS supports creating cleaner, 
      cross-browser friendly CSS faster and easier.

现在创建myfile.less文件。

myfile.less

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

现在创建style.less文件。

无样式

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

myfile.less文件，将从路径https://www.tutorialspoint.com/less/myfile.less导入到style.less中

您可以使用以下命令将style.less文件编译为style.css-

lessc style.less style.css

执行以上命令；它将使用以下代码自动创建style.css文件-

style.css

.myclass {
   color: #FF8000;
}

.myclass1 {
   color: #5882FA;
}

.myclass2 {
   color: #FF0000;
}

输出

请按照以下步骤查看上面的代码如何工作-

  • 将以上html代码保存在importing.html文件中。
  • 在浏览器中打开此HTML文件，将显示以下输出。

减少进口