首页 前端知识 scss运算

scss运算

2024-05-26 01:05:46 前端知识 前端哥 469 517 我要收藏

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求余运算和除法运算存在区别:

  • 无单位数字之间可以直接求余,结果也无单位
  • 无单位和有单位数字之间可以直接求余,结果有单位
  • 有单位数字之间求余,
  1. 如果单位相同,则结果单位就是除数、被除数的单位,
  2. 如果单位不同,则看是否可以转化,若可以转化,则结果单位就是被除数的单位,若不可以转化则编译报错

颜色值运算

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 有三个布尔运算符两个是二元:andor一个是一元:not

二元运算符:

  1. and:

    语法:

    html expression1 and expression2

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

  2. or:

    语法:

    html expression1 or expression2

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

一元运算符:

  • not:

    语法:

    html not expression

    最终的布尔值将与表达式值相反。

 需要注意的是,not运算符作用的条件需要用()包裹,避免歧义,如下例子:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/9584.html
标签
scss
评论
发布的文章

html5怎么实现语音搜索

2024-06-01 10:06:32

HTML5

2024-02-27 11:02:15

HTML - 头部元素

2024-06-01 10:06:06

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!