LESS中的运算有什么用？-css教程-PHP中文网

LESS中的运算有什么用？

王林

发布： 2023-09-01 20:25:02

转载

880 人浏览过

LESS中的运算有什么用？

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;
}

登录后复制