LESS中的运算有什么用？

百变鹏仔 3个月前 (09-20) #CSS

文章标签什么用

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 headerheader {   height: @header-height;} // Set height of the navnav {   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 值。

文章推荐

LESS中的运算有什么用？

LESS 中的不同操作

Calc() 异常

示例

输出

示例

输出

示例

输出

示例

输出

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写