关于前端:Less-运算操作

Less 语言中反对运算，咱们能够给变量进行一些运算操作，例如加 +、减 -、乘 *、除 / 四个运算符，这四个运算符能够对任何数字、色彩或变量进行运算。个别运算符在进行加、减计算之前会进行单位换算。计算的后果以最左侧操作数的单位类型为准。如果单位换算有效或失去意义，则疏忽单位。

运算的应用其实很简略，就是对属性值或变量进行一些加减乘除运算。

示例：

咱们来看上面这段 HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Less 学习 (9xkd.com)</title>
        <link rel="styleSheet" type="text/css" href="./index.css">
    </head>
    <body>
        <div class="content">
            <h3> 欢送来到侠课岛！</h3>
            <p class="p1"> 这里是前端局部 </p>
            <p class="p2"> 这里是 Python 局部 </p>
        </div>
    </body>
</html>

当初的需要是，咱们要给上述内容设置字体大小，比方题目字体大小为 28px，第一段字体大小为 18px，第二段字体大小为 12px。

而后咱们能够创立一个 Less 文件，文件中的内容如下所示：

@fontsize:14px;

.content{
  h3{font-size: @fontsize * 2;}
  .p1{font-size: @fontsize + 4;}
  .p2{font-size: @fontsize - 2;}
}

其中定义了一个变量 @fontsize，值为 14px，而后能够对这个变量进行加减乘除运算，例如下面 h3 的字体大小被设置为 @fontsize * 2，14 乘以 2 等于 28 等，其余同理。

上面为编译后的 CSS 代码：

.content h3 {font-size: 28px;}
.content .p1 {font-size: 18px;}
.content .p2 {font-size: 12px;}

咱们来看一下在浏览器中的演示成果：

当然除了字体大小，咱们还能够对宽度、高度、内外边距、色彩等等进行运算。

在对色彩进行运算时，会疏忽 # 号，例如咱们来看上面这个例子。

示例：

定义一个色彩值为 #000000 的变量，而后咱们能够在这个变量值的根底上进行运算：

@color-black:#000000;

.content{
  h3{color: @color-black;}
  p{color: @color-black + #888888;}
}

编译成 CSS 代码：

.content h3 {color: #000000;}
.content p {color: #888888;}

在浏览器中查看演示成果：

Less 在运算时，色彩值会先转换为 rgb 模式，而后再转换为 16 进制的色彩值并返回。因为是转换为 rgb 模式，而 rgb 的取值范畴在 0~255 之间，所以不能超过这个范畴的值。

并且在进行色彩值计算时，咱们还能够间接应用色彩值的名称，例如 red 等进行计算，比方 red + #888888 等于 #ff8888。

示例：

例如咱们将变量的值定义为 red，在计算时会先将 red 转换为 rgb(255,0,0) 来计算，如下所示：

@color-black:red;

.content{
  h3{color: @color-black - #111111;}
  p{color: @color-black + #888888;}
}

编译成 CSS 代码：

.content h3 {color: #ee0000;}
.content p {color: #ff8888;}

在浏览器中的演示成果：

想理解更多能够看：https://www.9xkd.com/

运算的应用

示例：

色彩值运算

示例：

示例：