Less 注释

  • 定义

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

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

    comments.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>
    </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
    如果不懂以上命令操作,请先阅读我们 Less 安装