LESS import语句
LESS import语句
import语句它可以保存一个路径的变量。当你参考一个共同的父目录的时候是非常有用的。
示例
下面的例子演示了如何在 import 语句使用变量:
<html> <head> <link rel="stylesheet" href="style.css" type="text/css" /> <title>LESS Variables in Import Statements</title> </head> <body> <div class="myclass"> <h2>Welcome to Kaifaxueyuan</h2> <p>LESS is a CSS pre-processor that enables customizable, manageable and reusable style sheet for web site.</p> </div> </body> </html>
接着创建文件 style.less。
/*style.less*/ @path : "http://www.kaifaxueyuan.com/less"; @import "@{path}/external1.less"; .myclass{ color : #A52A2A; }
从 http://www.kaifaxueyuan.com/frontend/less/external1.less 导入 external.less 文件到 style.less 文件:
/*external1.less*/ .myclass{ background: #C0C0C0; }
使用下面的命令编译 style.less 来生成 style.css 文件:
lessc style.less style.css
执行上面的命令,它会创建 style.css文件:
/*style.css*/ body { background: #C0C0C0; } p { color: #A52A2A; }
输出
执行以下步骤,看看上面的代码工作:
保存上述的HTML代码在 less_variables_interpolation_import.html 文件。
在浏览器中打开该HTML文件,得到如下输出显示。