LESS中的运算的用途是什么

LESS（Leaner Style Sheets）是一种动态样式表语言，它通过附加功能来扩展CSS（层叠样式表）。它提供了多种操作来对CSS值进行数学计算，使开发人员能够创建更灵活和动态的样式。

本教程将教我们如何在LESS中使用这些操作，并创建适应不同屏幕尺寸和设备的样式。

LESS中的不同操作

以下是可以在LESS中使用的一些操作-

加法（+）和减法（-） - 这些操作允许我们将值相加或相减。

乘法（*）和除法（/） - 这些操作允许我们将值相乘或相除。

Calc()异常

CSS中的calc()函数允许我们对可以在CSS中使用的值进行数学运算。此函数可用于根据其他值计算元素的宽度或高度，在响应式设计中非常有用。

需要注意的一点是，calc()默认情况下不会评估数学表达式。这是出于CSS兼容性原因，因为某些浏览器可能不支持某些数学函数。然而，calc()将评估嵌套函数中的变量和数学，允许用户进行更复杂的计算。

例如，假设我们有一个变量@width。我们可以在calc()函数中使用这个变量来计算元素的宽度，如下所示：

@width:50vh;
h1 {
   width: calc(50% + (@width - 20px));
}

结果的值将为calc(50% + (50vh – 20px))。

示例

在此示例中，我们定义了一个@base-size变量，并使用加法和减法运算创建了两个新变量@large-size和@small-size。@large-size变量将基本大小增加了4px，而@small-size变量将基本大小减少了2px。然后，我们使用这些变量设置了h1和p元素的字体大小。

@base-size: 16px;
@large-size: @base-size + 4px; // Adds 4px to base size
@small-size: @base-size - 2px; // Subtracts 2px from base size

h1 {
   font-size: @large-size;
}

p {
   font-size: @small-size;
}

输出

h1 {
   font-size: 20px;
}
p {
   font-size: 14px;
}

示例

在这个示例中，我们使用变量来设置布局的基本宽度和列数。然后，我们通过将基本宽度除以列数来计算每个列的宽度。最后，在一个媒体查询中，我们将半宽列的宽度设置为列宽的6倍，该列宽是通过乘法计算得出的。

@base-width: 960px;
@column-count: 12;
@column-width: @base-width / @column-count; 
@media (min-width: 768px) {
   .col-md-6 {
      width: @column-width * 6; 
   }
}

输出

@media (min-width: 768px) {
   .col-md-6 {
      width: 960px / 12 * 6;
   }
}

示例

在此示例中，我们首先将数学设置更改为始终，然后为标题和导航元素的高度定义变量。我们使用calc()函数来使用之前定义的变量计算主元素的高度。

接下来，我们将数学设置重置为默认值，并为盒子的宽度和填充定义新变量。我们使用数学运算来计算盒子的宽度并相应地设置其宽度。

通过将数学设置更改为始终，我们可以执行复杂的数学运算而不将它们简化为最简形式，从而更好地控制我们的样式。

// Set math setting to always
@math: always;

// Define variables
@header-height: 80px;
@nav-height: 50px;

// Set height of the header
header {
   height: @header-height;
} 
// Set height of the nav
nav {
   height: @nav-height;
} 
// Calculate the height of the main using calc()
main {
   height: calc(100% - (@header-height + @nav-height));
} 
// Reset math setting to default
@math: default; 

// Define new variables
@box-width: 300px;
@padding: 20px; 

// Calculate the width of the box using math operations
.box {
   width: @box-width + @padding;
}

输出

header {
   height: 80px;
}
nav {
   height: 50px;
}
main {
   height: calc(100% - (80px + 50px));
}
.box {
   width: 320px;
}

示例

在这个示例中，我们定义了两种颜色（@color-1和@color-2），并使用LESS对它们进行了不同的算术运算。我们将这两种颜色相加，从第一个颜色中减去第二种颜色，将第一种颜色乘以50％，并将这两种颜色以每种50％的权重混合在一起。

用户可以观察到每个操作的输出结果都是一种新的颜色，可以用作CSS属性的值。

// Define two colors
@color-1: #ff0000;
@color-2: #00ff00;

// Add the two colors together
.add-colors {
   background-color: @color-1 + @color-2;
}

// Subtract the second color from the first
.subtract-colors {
   background-color: @color-1 - @color-2;
}

// Multiply the first color by 50%
.multiply-color {
   background-color: @color-1 * 50%;
}

// Mix the two colors with a 50% weight for each
.mix-colors {
   background-color: mix(@color-1, @color-2, 50%);
}

输出

.add-colors {
   background-color: #ffff00;
}
.subtract-colors {
   background-color: #ff0000;
}
.multiply-color {
   background-color: #ff0000;
}
.mix-colors {
   background-color: #808000;
}