LESS（精简样式表）是一种动态样式表语言，它通过附加功能扩展了 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;
}
结论
用户学习了如何在 LESS 中使用各种算术运算，包括加法、减法、乘法和除法。他们还学会了使用 calc() 函数执行复杂的数学计算。
除了数值的算术运算之外，用户还了解了颜色的算术运算。这涉及添加或减去颜色值，例如 RGB、HEX 或 HSL 值。
