Scss学习--Scss逻辑运算

逻辑运算

scss支持±*/等逻辑运算

这里着重讲解+和/

除法

只有在以下三种情况中scss才会把 / 视为除法运算符号：

1. 如果值，或值的一部分，是变量或者函数的返回值
2. 如果值被圆括号包裹
3. 如果值是算数表达式的一部分*/

p{
    height: 10px/8px;
    width: (10px/2) ;
    padding:2px + 8px/2;
    $margin-social:10px;
    $margin-image:5px;
    margin-top: $margin-image/$margin-social px;
}

字符串’+'运算

加号左边是有引号字符串结果就有引号字符串

加号左边无引号字符串结果就无引号字符串

$money:null;
p{
    cursor: po + inter;
    content: "Fool" + lish;
    margin: 3px + 4px auto;
    font-family: sans- + "serif";
    content: "I am #{9+10} years old,but I have #{$money} money";
}

颜色值运算

可以是rgb()、rgba()或者其他的scss色彩表示样式

p {
  color: #010203 + #040506;
}
编译为
p {
  color: #050709;
  }
  
$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); }

注意：这里的色值运算符在node.scss下是不能进行计算的

我是用的koala来进行编译
更多色值运算请关注官方文档：英文文档

布尔运算 (Boolean Operations)

SassScript 支持布尔型的 and or 以及 not 运算。

数组运算 (List Operations)

数组不支持任何运算方式，只能使用 list functions 控制。

圆括号 (Parentheses)

圆括号可以用来影响运算的顺序