CSS的Sass框架中常用的 *** 作符的使用教程

CSS的Sass框架中常用的 *** 作符的使用教程,第1张

CSS的Sass框架中常用的 *** 作符的使用教程

赋值 *** 作符

Sass 使用冒号( : )来定义一个变量:

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

算术 *** 作符

算术 *** 作符用于执行数学计算,下面是 Sass 所支持的算术 *** 作符:
*** 作符 简介 +-*/% 取余
注意,上面的 *** 作符只能用于单位相同的数值运算:

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

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

CSS Code复制内容到剪贴板
  1. h2 {   
  2.     font-size5px * 2px; // invalid CSS   
  3. }  

如你所知,/ *** 作符本身就是 CSS 简写语法的一部分,比如:

CSS Code复制内容到剪贴板
  1. font16px / 24px Arial sans-serif;   
  2. backgroundurl("http://example.com"no-repeat fixed center / cover;  

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

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

Sass 中的 *** 作符也具有优先级的概念,规则如下:

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

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

相等 *** 作符

相等 *** 作符常用于条件语句,用来比较左右运算子是否相等,最终返回布尔值:
*** 作符 简介 == 相等 != 不等
相等 *** 作符适用于所有类型,下面来看两个示例。


在第一个示例中,我们使用 == 来测试 $font 的类型,并输出对应的信息:

CSS Code复制内容到剪贴板
  1. @mixin font-fl($font){   
  2.     &:after {   
  3.         @if(type-of($font) == string) {   
  4.             content'My font is: #{$font}.';   
  5.         } @else {   
  6.             content'Sorry, the argument #{$font} is a #{type-of($font)}.';   
  7.         }   
  8.     }   
  9. }   
  10.   
  11. h2{   
  12.     @include font-fl(sans-serif);   
  13. }  

编译结果:

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

在第二个示例中,定义了一个列表并检查该列表的长度。


通过使用 % *** 作符,我们可以计算每个元素的长度,然后根据特定条件对 color 进行赋值:

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

编译结果:

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

比较 *** 作符

与相等 *** 作符类似,比较 *** 作符用来比较数值。


在 Sass 中,支持以下比较 *** 作符:
*** 作符 简介 > 大于 >= 大于或者等于 < 小于 <= 小于或者等于
下面是一个简单的示例:

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

编译结果:

CSS Code复制内容到剪贴板
  1. h2 {   
  2.     padding25px;   
  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);   
  2.   
  3. @mixin button-state($btn-state) {   
  4.     @if (length($list-map) > 2 or length($list-map) < 5) {   
  5.         background-color: map-get($list-map, $btn-state);   
  6.     }   
  7. }   
  8.   
  9. .btn {   
  10.     @include button-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) > 2 or not (length($list-map) == 3)) {...}    
  2. // true   
  3.   
  4. @if (length($list-map) > 2 and not (length($list-map) == 3)) {...}    
  5. // false  

字符串 *** 作符

在第一节我们就讲过,+ 可以用来拼接字符串。


下面是一个 + 拼接字符串的规则:

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

CSS Code复制内容到剪贴板
  1. @mixin string-concat {   
  2.     &:after {   
  3.         content"My favorite language is " + Sass;   
  4.         fontArial + " sans-serif";   
  5.     }   
  6. }   
  7.   
  8. h2 {   
  9.     @include string-concat;   
  10. }  

编译结果:

CSS Code复制内容到剪贴板
  1. h2:after {   
  2.     content"My favorite language is Sass";   
  3.     fontArial sans-serif;   
  4. }  

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

CSS Code复制内容到剪贴板
  1. @mixin string-concat ($language) {   
  2.     &:after {   
  3.         content"My favorite language is #{$language}";   
  4.   
  5.         // second way without using interpolation   
  6.         //content"My favorite language is " + $language;   
  7.     }   
  8. }   
  9.   
  10. h2 {   
  11.     @include string-concat(Sass);   
  12. }  

编译结果:

CSS Code复制内容到剪贴板
  1. h2:after {   
  2.     content"My favorite language is Sass";   
  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);   
  3.   
  4.     color: rgba(70, 132, 153, .9) + rgba(32, 68, 121, .7);   
  5.     // 报错,透明通道的值必须一致   
  6. }  

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


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/618878.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-15
下一篇 2022-04-15

发表评论

登录后才能评论

评论列表(0条)

保存