示例
以下示例演示了在 LESS 文件中导入的用法--
importing.html
<!doctype html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程(cainiaoya.com)</title>
<link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
<h1>使用导入的示例</h1>
<p class="myclass">通过LESS可自定义,可管理且可重复使用的网站样式表。</p>
<p class="myclass1">它允许重复使用CSS代码和用相同的语义编写LESS代码。</p>
<p class="myclass2">很少支持创建更干净的内容,跨浏览器友好的CSS更快,更容易。</p>
</body>
</html>
现在让我们创建一个与 CSS 非常相似的文件 style.less 和 myfile.less,唯一的区别是它将以 .less 扩展名保存。 .html 和 .less 这几个文件都应在 F 盘的文件夹 lesscode 内创建。
myfile.less
/* 显示 绿色! */
.myclass {
color: green;
}
// 显示蓝色
.myclass1 {
color: red;
}
style.less
@import "./myfile.less";
.myclass2 {
color: #FF0000;
}
使用以下命令将 style.less 文件编译为 style.css-
PS F:\lesscode> lessc style.less style.css
当您运行上述命令时,它将自动创建style.css文件。 每当您更改LESS文件时,都需要在cmd中运行上述命令,然后style.css文件将得到更新。
运行以上命令时,style.css文件将具有以下代码-
style.css
.myclass {
color: #FF8000;
}
.myclass1 {
color: #5882FA;
}
.myclass2 {
color: #FF0000;
}