CSS的Sass框架中常用的操作符的如何使用好代码教程

网络
杜鹃啼血染花红，山后山前一画中。旅行的意义不在于浏览风景，而是到一个完全陌生的环境，放空自己，感受享受孤独!

赋值操作符

Sass 使用冒号（ : ）来定义一个变量：

CSS Code复制内容到剪贴板
  1. $main-color:lightgray;

算术操作符

算术操作符用于执行数学计算，下面是 Sass 所支持的算术操作符：

操作符 简介
+ 加
- 减
* 乘
/ 除
% 取余

注意，上面的操作符只能用于单位相同的数值运算：

CSS Code复制内容到剪贴板
  1. h2{
  2. font-size:5px+2em;//单位不一致，编译报错
  3. font-size:5px+2;//7px
  4. }

此外，两个单位相同的数值相乘无法生成有效的 CSS：

CSS Code复制内容到剪贴板
  1. h2{
  2. font-size:5px*2px;//invalidCSS
  3. }

如你所知，/ 操作符本身就是 CSS 简写语法的一部分，比如：

CSS Code复制内容到剪贴板
  1. font:16px/24pxArialsans-serif;
  2. background:url("http://example.com")no-repeatfixedcenter/cover;

但是，Sass 重载了该运算符，用于执行除法操作，下面让我们看看它是如何解析的：

CSS Code复制内容到剪贴板
  1. h2{
  2. //不执行除法操作，原样输出
  3. font-size:16px/24px;
  5. //使用插值语法之后，原样输出
  6. font-size:#{$base-size}/#{$line-height};
  8. //使用括号包裹之后，执行除法操作
  9. font-size:(16px/24px);
  11. //使用变量，执行除法操作
  12. font-size:$base-size/$line-height;
  14. //调用函数，执行除法操作
  15. opacity:random(4)/5;
  17. //使用算术操作符，执行除法操作
  18. padding-right:2px/4px+3px;
  19. }

Sass 中的操作符也具有优先级的概念，规则如下：

括号中的操作具有最高优先级
乘法、除法的优先级高于加法和减法

CSS Code复制内容到剪贴板
  1. h2{
  2. width:3px*5+5px;//20px
  4. width:3*(5px+5px);//30px
  6. width:3px+(6px/2)*3;//12px
  7. }

相等操作符

相等操作符常用于条件语句，用来比较左右运算子是否相等，最终返回布尔值：

操作符 简介
== 相等
!= 不等

相等操作符适用于所有类型，下面来看两个示例。在第一个示例中，我们使用 == 来测试 $font 的类型，并输出对应的信息：

CSS Code复制内容到剪贴板
  1. @mixinfont-fl($font){
  2. &:after{
  3. @if(type-of($font)==string){
  4. content:'Myfontis:#{$font}.';
  5. }@else{
  6. content:'Sorry,theargument#{$font}isa#{type-of($font)}.';
  7. }
  8. }
  9. }
  11. h2{
  12. @includefont-fl(sans-serif);
  13. }

编译结果：

CSS Code复制内容到剪贴板
  1. h2:after{
  2. content:'Myfontis:sans-serif.';
  3. }

在第二个示例中，定义了一个列表并检查该列表的长度。通过使用 % 操作符，我们可以计算每个元素的长度，然后根据特定条件对 color 进行赋值：

CSS Code复制内容到剪贴板
  1. $list:"tomato","lime","lightblue";
  3. @mixinfg-color($property){
  4. @each$itemin$list{
  5. $color-length:str-length($item);
  6. @if($color-length%2!=0){
  7. #{$property}:unquote($item);
  8. }
  9. }
  10. }
  12. h2{
  13. @includefg-color(color);
  14. }

编译结果：

CSS Code复制内容到剪贴板
  1. h2{
  2. color:lightblue;
  3. }
  4. 这里需要提醒的是，Sass不支持严格相等操作符===，不过从下面的示例中你会发现，Sass解析==的原则就是严格相等：
  6. //在javascript中
  7. ("5"==5)//true
  9. ("5"===5)//false
  11. //在Sass中
  12. ("5"==5)//false
  14. (20px==20)//true(Libsass不支持)

比较操作符

与相等操作符类似，比较操作符用来比较数值。在 Sass 中，支持以下比较操作符：

操作符 简介
> 大于
>= 大于或者等于
< 小于
<= 小于或者等于

下面是一个简单的示例：

CSS Code复制内容到剪贴板
  1. $padding:50px;
  3. h2{
  4. @if($padding<=20px){
  5. padding:$padding;
  6. }@else{
  7. padding:$padding/2;
  8. }
  9. }

编译结果：

CSS Code复制内容到剪贴板
  1. h2{
  2. padding:25px;
  3. }

逻辑操作符

逻辑操作符常用于测试多个条件表达式，Sass 支持的逻辑操作符如下所示：

操作符 条件 简介
and x and y 与操作
or x or y 或操作
not not x 取反

下面通过一个示例来解释逻辑操作符的用法：定义一个 map，存储按钮的状态以及对应的颜色，然后创建一个条件语句，用来测试 map 内元素的多少。如果通过条件测试，那么就给 h2 添加 background-color 属性。代码如下所示：

CSS Code复制内容到剪贴板
  1. $list-map:(success:lightgreen,alert:tomato,info:lightblue);
  3. @mixinbutton-state($btn-state){
  4. @if(length($list-map)>2orlength($list-map)<5){
  5. background-color:map-get($list-map,$btn-state);
  6. }
  7. }
  9. .btn{
  10. @includebutton-state(success);
  11. }

编译结果：

CSS Code复制内容到剪贴板
  1. .btn{
  2. background-color:lightgreen;
  3. }

如你所见，因为 map 的元素数量为 3，符合 length($list-map) > 2 – length($list-map) < 5 的条件，所以返回的结果是 true。

请注意以下两个条件的差异：

CSS Code复制内容到剪贴板
  1. @if(length($list-map)>2ornot(length($list-map)==3)){...}
  2. //true
  4. @if(length($list-map)>2andnot(length($list-map)==3)){...}
  5. //false

字符串操作符

在第一节我们就讲过，+ 可以用来拼接字符串。下面是一个 + 拼接字符串的规则：

如果字符串被引号包裹，那么它拼接任何字符串的结果也会被引号包裹
如果字符串没有被引号包裹，那么它拼接任何字符串的结果也不会被引号包裹
下面是一个实际示例：

CSS Code复制内容到剪贴板
  1. @mixinstring-concat{
  2. &:after{
  3. content:"Myfavoritelanguageis"+Sass;
  4. font:Arial+"sans-serif";
  5. }
  6. }
  8. h2{
  9. @includestring-concat;
  10. }

编译结果：

CSS Code复制内容到剪贴板
  1. h2:after{
  2. content:"MyfavoritelanguageisSass";
  3. font:Arialsans-serif;
  4. }

此外，我们可以使用差值语法动态改变字符串，如果插值的结果为 null，那么该值不会被输出，下面是一个示例：

CSS Code复制内容到剪贴板
  1. @mixinstring-concat($language){
  2. &:after{
  3. content:"Myfavoritelanguageis#{$language}";
  5. //secondwaywithoutusinginterpolation
  6. //content:"Myfavoritelanguageis"+$language;
  7. }
  8. }
  10. h2{
  11. @includestring-concat(Sass);
  12. }

编译结果：

CSS Code复制内容到剪贴板
  1. h2:after{
  2. content:"MyfavoritelanguageisSass";
  3. }

颜色运算

在上面的第二节中，我们分析了算术操作符，在 Sass 中一个有趣的事情就是，我们可以使用算术运算符操作颜色。请看一个实例：

CSS Code复制内容到剪贴板
  1. h2{
  2. color:#468499+#204479;
  3. }

编译结果:

CSS Code复制内容到剪贴板
  1. h2{
  2. color:#66c8ff;
  3. }

那么，其中的解析原则是什么呢？首先我们需要记住，十六进制颜色值是由红绿蓝三种值组合而成，然后在执行相加时，每两个十六进制数值分组相加：46+20=66 (红色), 84+44=c8 (绿色), 和 99+79=ff (蓝色)。

下面是我们的最后一个示例，和上面示例的差别在于它使用了 rgba()：

CSS Code复制内容到剪贴板
  1. h2{
  2. color:rgba(70,132,153,1)+rgba(32,68,121,1);
  4. color:rgba(70,132,153,.9)+rgba(32,68,121,.7);
  5. //报错，透明通道的值必须一致
  6. }

使用算术操作符处理 rgba() 和 hsla() 时，必须让透明通道的值保持一致。

到此这篇关于CSS的Sass框架中常用的操作符的如何使用好代码教程就介绍到这了。世界上只有想不通的人，没有走不通的路。更多相关CSS的Sass框架中常用的操作符的如何使用好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例