上一节:
下一节:

  Less 运算符

  • 定义

    LESS 支持某些算术运算，例如加号（+），减号（-），乘法（*）和除法（/），它们可以对任何数字，颜色或变量进行运算。 使用变量时，操作可以节省大量时间，并且您会喜欢简单的数学工作。

  • 示例

    以下示例演示了LESS文件中运算符的使用-

    operations.html

    <!doctype html>
<head>
    <link rel = "stylesheet" href = "style.css" type = "text/css" />
</head>
<body>
    <h1>使用运算符的示例</h1>
    <p class="myclass">LESS支持自定义，网站的可管理和可重复使用的样式表。</p>
</body>
</html>
    现在让我们创建一个与CSS非常相似的文件style.less，唯一的区别是它将以.less扩展名保存。 .html和.less这两个文件都应在 F 盘的文件夹lesscode内创建。

    style.less

    @fontSize: 10px;
.myclass {
    font-size: @fontSize * 2;
    color:green;
}
    使用以下命令将style.less文件编译为style.css- 
    PS F:\lesscode> lessc style.less style.css
    当您运行上述命令时，它将自动创建style.css文件。 每当您更改LESS文件时，都需要在cmd中运行上述命令，然后style.css文件将得到更新。
    运行以上命令时，style.css文件将具有以下代码-

    style.css

    .myclass {
    font-size: 20px;
    color: green;
 }

  • 输出结果

    现在让我们执行以下步骤，看看上面的代码如何工作-
    将上面的html代码保存在operations.html文件中。
    在浏览器中打开此HTML文件，将显示以下输出。
    less
    如果不懂以上命令操作，请先阅读我们 Less 安装
上一节:
下一节: