LESS 中的操作有什么用？

与许多编程语言类似， LESS也提供算术运算，如加法 (+) 、减法 (-) 、除法 (/)和乘法 (*) 。如果使用得当，这些运算符可以使我们的工作变得更加轻松。它就像在样式表中做基础数学一样简单，可以应用于任何变量、数字甚至颜色。使用这些运算符，我们的工作将会减少并且变得非常快。

让我们通过以下示例更好地理解这一点。

示例：首先，我们将使用以下代码创建一个 LESS 文件（扩展名为 .less）。

demo.less

@var : 10px;
.class1 {
    font-size: @var * 8;
    color: red;
}
.class2 {
    font-size: @var + 20;
    color: green;
}

使用以下命令，我们可以将demo.less编译成 CSS。

lessc demo.less demo.css

CSS 输出：我们有一个与以下内容等效的 CSS 文件。

demo.less

.class1 {
  font-size: 80px;
  color: red;
}
  
.class2 {
  font-size: 30px;
  color: green;
}

现在让我们创建一个 HTML 文件来试用这个 CSS 代码。

索引.html

  
    
    
  
  
    
GeeksforGeeks
  
    
Welcome to GFG
  
  

输出：