成都网站建设设计

将想法与焦点和您一起共享

创新互联less教程:Less导入

描述

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

创新互联是一家专业提供大石桥企业网站建设,专注与成都网站建设、成都做网站H5高端网站建设、小程序制作等业务。10年已为大石桥众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。


例子

下面的例子演示了在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 。

style.less

@import "//www.w3cschool.cn/less/myfile.less";
.myclass2
{
color: #FF0000;
}

将路径从 style.less 的 myfile.less “> //www.w3cschool.cn/less/myfile.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文件,将显示如下输出。




网站题目:创新互联less教程:Less导入
分享路径:http://chengdu.cdxwcx.cn/article/djhiscd.html