scss运算

最新推荐文章于 2024-06-08 01:11:17 发布

左手喵子

最新推荐文章于 2024-06-08 01:11:17 发布

阅读量1.4k

点赞数 20

分类专栏： scss 文章标签： scss 前端 css

本文链接：https://blog.csdn.net/weixin_42017221/article/details/136072555

版权

scss 专栏收录该内容

7 篇文章 2 订阅

订阅专栏

scss运算

数字运算

SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

加法运算演示：

从上面运算可以看出：

无单位数字和无单位数字可以直接运算，结果为无单位数字
无单位数字和有单位数字可以直接运算，结果为有单位数字
有单位数字和有单位数字运算时，
如果单位相同，则可以直接运算，结果为有单位数字
如果单位不同，则看两个单位之间是否可以互相转化，若可以则转化为前面的单位后运算，若不可以则编译报错，比如pt和px可以互相转化，但是px和rem无法互相转化，px和%无法互相转化。

减法运算演示：

和+运算同理。

乘法运算演示：

*运算需要注意的是，不仅数字会相乘，单位也会相乘，因此*运算中，不能进行有单位数字和有单位数字的乘法，只能进行有单位数字和无单位数字，无单位数字和无单位数字的乘法。

除法运算演示：

在scss中，以下三种情况会进行除法运算：

如果值或值的一部分，是变量或者函数的返回值；
如果值被圆括号包裹；
如果值是算数表达式的一部分。

$width: 1000px;
div {
    font: 16px/30px Arial, Helvetica, sans-serif; // 不运算
    width: ($width/2); // 使用变量与括号，可运算
    width: (#{$width}/2); // 使用 #{} 插值语句将变量包裹，避免运算。
    z-index: round(10)/2; // 使用了函数，可运算
    height: (500px/2); // 使用了括号，可运算
    margin-left: 5px + 8px/2px; // 使用了+表达式，可运算
}

%运算演示：

求余运算符和百分号单位符号相同，因此求余运算时，我们必须要保证%求余运算符两边有空格，否则%会被当成百分号，如上例子。

其实，不仅仅是求余运算符两边要加空格，所有运算符两侧都建议加空格，避免歧义。

其实本质上来说，求余运算也算除法运算的一种，只是除法运算结果是商，求余运算结果是余数。

通过上面例子，我们可以发现，SCSS求余运算和除法运算存在区别：

无单位数字之间可以直接求余，结果也无单位
无单位和有单位数字之间可以直接求余，结果有单位
有单位数字之间求余，

如果单位相同，则结果单位就是除数、被除数的单位，
如果单位不同，则看是否可以转化，若可以转化，则结果单位就是被除数的单位，若不可以转化则编译报错

颜色值运算

p {
  color: #010203 + #040506;
}

编译后的CSS：

p {
  color: #050709; 
}

数字与颜色值运算

p {
  color: #010203 * 2;
}

编译后的CSS：

p {
  color: #020406; 
}

算术运算不会作用于 alpha 值

如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

编译为

p {
  color: rgba(255, 255, 0, 0.75); 
}

alpha的调整

颜色值的 alpha channel 可以通过 opacify 或 transparentize 两个函数进行调整。

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

编译为

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); 
}

字符串运算 (String Operations)

+ 用于连接字符串

p {
  cursor: e + -resize;
}

编译为

p {
  cursor: e-resize; 
}

引号的影响

注意，如果有引号字符串（位于 + 左侧）连接无引号字符串，运算结果是有引号的，相反，无引号字符串（位于 + 左侧）连接有引号字符串，运算结果则没有引号。

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

编译为

p:before {
  content: "Foo Bar";
  font-family: sans-serif; 
}

运算与其他值连用

运算表达式与其他值连用时，用空格做连接符。

p {
  margin: 3px + 4px auto;
}

编译为

p {
  margin: 7px auto; 
}

等号运算

等号运算有两个运算符：

==：等于
!=：不等于

等号运算可以用于比较任意类型的值，等号运算的结果为布尔值，等号运算常用于条件判断

等号运算其实也算是比较运算，但是SCSS中等号运算却被从比较运算中分离出来，这是因为等号运算可以比较任意类型的值，但是比较运算只能比较数字。

比较运算

比较运算有如下运算符：

SCSS中比较运算符只能比较数字类型的值，不能比较其他类型。

如果比较非数字类型的值，SCSS编译会报错

逻辑运算

布尔运算符: SASS 有三个布尔运算符两个是二元:and、or一个是一元:not。

二元运算符:

and:

语法:

html expression1 and expression2

只有当两个表达式的计算结果都为真时，最终的布尔值才为真，否则为假。
or:

语法:

html expression1 or expression2

只有当任何表达式的计算结果为真时，最终的布尔值才为真，否则为假。