今天小编跟大家讲解下有关CSS的Sass框架中常用的操作符的使用教程 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS的Sass框架中常用的操作符的使用教程 的相关资料，希望小伙伴们看了有所帮助。
赋值操作符
Sass 使用冒号（ : ）来定义一个变量：
CSS Code复制内容到剪贴板 $main-color:lightgray;算术操作符
算术操作符用于执行数学计算，下面是 Sass 所支持的算术操作符： 操作符 简介 + 加 - 减 * 乘 / 除 % 取余 注意，上面的操作符只能用于单位相同的数值运算：
CSS Code复制内容到剪贴板 h2{ font-size:5px+2em;//单位不一致，编译报错 font-size:5px+2;//7px }此外，两个单位相同的数值相乘无法生成有效的 CSS：
CSS Code复制内容到剪贴板 h2{ font-size:5px*2px;//invalidCSS }如你所知，/ 操作符本身就是 CSS 简写语法的一部分，比如：
CSS Code复制内容到剪贴板 font:16px/24pxArialsans-serif; background:url("http://example.com")no-repeatfixedcenter/cover;但是，Sass 重载了该运算符，用于执行除法操作，下面让我们看看它是如何解析的：
CSS Code复制内容到剪贴板 h2{ //不执行除法操作，原样输出 font-size:16px/24px; //使用插值语法之后，原样输出 font-size:#{$base-size}/#{$line-height}; //使用括号包裹之后，执行除法操作 font-size:(16px/24px); //使用变量，执行除法操作 font-size:$base-size/$line-height; //调用函数，执行除法操作 opacity:random(4)/5; //使用算术操作符，执行除法操作 padding-right:2px/4px+3px; }Sass 中的操作符也具有优先级的概念，规则如下：
括号中的操作具有最高优先级乘法、除法的优先级高于加法和减法
CSS Code复制内容到剪贴板 h2{ width:3px*5+5px;//20px width:3*(5px+5px);//30px width:3px+(6px/2)*3;//12px }相等操作符
相等操作符常用于条件语句，用来比较左右运算子是否相等，最终返回布尔值： 操作符 简介 == 相等 != 不等 相等操作符适用于所有类型，下面来看两个示例。在第一个示例中，我们使用 == 来测试 $font 的类型，并输出对应的信息：
CSS Code复制内容到剪贴板 @mixinfont-fl($font){ &:after{ @if(type-of($font)==string){ content:'Myfontis:#{$font}.'; [email protected]{ content:'Sorry,theargument#{$font}isa#{type-of($font)}.'; } } } h2{ @includefont-fl(sans-serif); }编译结果：
CSS Code复制内容到剪贴板 h2:after{ content:'Myfontis:sans-serif.'; }在第二个示例中，定义了一个列表并检查该列表的长度。通过使用 % 操作符，我们可以计算每个元素的长度，然后根据特定条件对 color 进行赋值：
CSS Code复制内容到剪贴板 $list:"tomato","lime","lightblue"; @mixinfg-color($property){ @each$itemin$list{ $color-length:str-length($item); @if($color-length%2!=0){ #{$property}:unquote($item); } } } h2{ @includefg-color(color); }编译结果：
CSS Code复制内容到剪贴板 h2{ color:lightblue; } 这里需要提醒的是，Sass不支持严格相等操作符===，不过从下面的示例中你会发现，Sass解析==的原则就是严格相等： //在javascript中 ("5"==5)//true ("5"===5)//false //在Sass中 ("5"==5)//false (20px==20)//true(Libsass不支持)比较操作符
与相等操作符类似，比较操作符用来比较数值。在 Sass 中，支持以下比较操作符： 操作符 简介 > 大于 >= 大于或者等于 < 小于 <= 小于或者等于 下面是一个简单的示例：
CSS Code复制内容到剪贴板 $padding:50px; h2{ @if($padding<=20px){ padding:$padding; [email protected]{ padding:$padding/2; } }编译结果：
CSS Code复制内容到剪贴板 h2{ padding:25px; }逻辑操作符
逻辑操作符常用于测试多个条件表达式，Sass 支持的逻辑操作符如下所示： 操作符 条件 简介 and x and y 与操作 or x or y 或操作 not not x 取反 下面通过一个示例来解释逻辑操作符的用法：定义一个 map，存储按钮的状态以及对应的颜色，然后创建一个条件语句，用来测试 map 内元素的多少。如果通过条件测试，那么就给 h2 添加 background-color 属性。代码如下所示：
CSS Code复制内容到剪贴板 $list-map:(success:lightgreen,alert:tomato,info:lightblue); @mixinbutton-state($btn-state){ @if(length($list-map)>2orlength($list-map)<5){ background-color:map-get($list-map,$btn-state); } } .btn{ @includebutton-state(success); }编译结果：
CSS Code复制内容到剪贴板 .btn{ background-color:lightgreen; }如你所见，因为 map 的元素数量为 3，符合 length($list-map) > 2 – length($list-map) < 5 的条件，所以返回的结果是 true。
请注意以下两个条件的差异：
CSS Code复制内容到剪贴板 @if(length($list-map)>2ornot(length($list-map)==3)){...} //true @if(length($list-map)>2andnot(length($list-map)==3)){...} //false字符串操作符
在第一节我们就讲过，+ 可以用来拼接字符串。下面是一个 + 拼接字符串的规则：
如果字符串被引号包裹，那么它拼接任何字符串的结果也会被引号包裹如果字符串没有被引号包裹，那么它拼接任何字符串的结果也不会被引号包裹下面是一个实际示例：
CSS Code复制内容到剪贴板 @mixinstring-concat{ &:after{ content:"Myfavoritelanguageis"+Sass; font:Arial+"sans-serif"; } } h2{ @includestring-concat; }编译结果：
CSS Code复制内容到剪贴板 h2:after{ content:"MyfavoritelanguageisSass"; font:Arialsans-serif; }此外，我们可以使用差值语法动态改变字符串，如果插值的结果为 null，那么该值不会被输出，下面是一个示例：
CSS Code复制内容到剪贴板 @mixinstring-concat($language){ &:after{ content:"Myfavoritelanguageis#{$language}"; //secondwaywithoutusinginterpolation //content:"Myfavoritelanguageis"+$language; } } h2{ @includestring-concat(Sass); }编译结果：
CSS Code复制内容到剪贴板 h2:after{ content:"MyfavoritelanguageisSass"; }颜色运算
在上面的第二节中，我们分析了算术操作符，在 Sass 中一个有趣的事情就是，我们可以使用算术运算符操作颜色。请看一个实例：
CSS Code复制内容到剪贴板 h2{ color:#468499+#204479; }编译结果:
CSS Code复制内容到剪贴板 h2{ color:#66c8ff; }那么，其中的解析原则是什么呢？首先我们需要记住，十六进制颜色值是由红绿蓝三种值组合而成，然后在执行相加时，每两个十六进制数值分组相加：46+20=66 (红色), 84+44=c8 (绿色), 和 99+79=ff (蓝色)。
下面是我们的最后一个示例，和上面示例的差别在于它使用了 rgba()：
CSS Code复制内容到剪贴板 h2{ color:rgba(70,132,153,1)+rgba(32,68,121,1); color:rgba(70,132,153,.9)+rgba(32,68,121,.7); //报错，透明通道的值必须一致 }使用算术操作符处理 rgba() 和 hsla() 时，必须让透明通道的值保持一致。
来源：爱蒂网
