Less 注释 - 蝴蝶教程

定义

注释使代码清晰易懂，用户易于理解。您可以在代码中同时使用块样式和行内注释，但是在编译 LESS 代码时，单行注释将不会出现在 CSS 文件中。

示例

以下示例演示了LESS文件中注释的使用-

comments.html

<!doctype html>
<head>
    <meta charset="UTF-8" />
    <title>蝴蝶教程(jc2182.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>
</body>
</html>

现在让我们创建一个与 CSS 非常相似的文件 style.less，唯一的区别是它将以 .less 扩展名保存。 .html 和 .less 这两个文件都应在 F 盘的文件夹 lesscode 内创建。

style.less

/* 显示 绿色！ */
.myclass {
    color: green;
}

// 显示蓝色
.myclass1 {
    color: red;
}

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

PS F:\lesscode> lessc style.less style.css

当您运行上述命令时，它将自动创建style.css文件。每当您更改LESS文件时，都需要在cmd中运行上述命令，然后style.css文件将得到更新。

运行以上命令时，style.css文件将具有以下代码-

style.css

/* 显示 绿色！ */
.myclass {
    color: green;
}
.myclass1 {
    color: red;
}

输出结果

现在让我们执行以下步骤，看看上面的代码如何工作-

将上面的 html 代码保存在 comments.html 文件中。

在浏览器中打开此 HTML 文件，将显示以下输出。

如果不懂以上命令操作，请先阅读我们 Less 安装