您现在的位置是：网站首页> 编程资料编程资料

CSS的Sass框架中常用的操作符的使用教程CSS框架sass的简单一览CSS的SASS样式编程指南学习CSS预处理器:Sass和less进行对比sass(scss）的安装与使用教程

2021-09-05 859人已围观

简介 这篇文章主要介绍了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; // invalid CSS   
  3. }  

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

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

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

CSS Code复制内容到剪贴板
  1. h2 {   
  2.     // 不执行除法操作，原样输出   
  3.     font-size: 16px / 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-right: 2px / 4px + 3px;    
  19. }  

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

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

CSS Code复制内容到剪贴板
  1. h2 {   
  2.     width: 3px * 5 + 5px; // 20px  
  3.   
  4.     width: 3 * (5px + 5px); // 30px  
  5.   
  6.     width: 3px + (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. $padding: 50px;   
  2.   
  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 支持的逻辑操作符如下所示：

操作符条件简介
andx and y与操作
orx or y或操作
notnot x取反

下面通过一个示例来解释逻辑操作符的用法：定义一个 map，存储按钮的状态以及对应的颜色，然后创建一个条件语句，用来测试 map 内元素的多少。如果通过条件测试，那么就给 h2 添加 background-color 属性。代码如下所示：
CSS Code复制内容到剪贴板
提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

上一篇：CSS3对背景图片的裁剪及尺寸和位置的设定方法CSS3实现的全屏背景图片缩小渐变切换效果源码CSS的background属性及CSS3的背景图片设置总结jQuery+CSS3实现鼠标点击背景图片向上拉伸切换特效源码jquery+css3实现的网页背景图片固定内容切换特效源码多重CSS背景动画实现方法示例css实现的鼠标悬停360度背景图片做动画旋转效果css3实现背景图片拉伸效果像桌面壁纸一样css3背景图片透明叠加属性cross-fade简介及用法实例

下一篇：深入解析CSS的Sass框架中混合宏的使用前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范详解CSS的Sass框架中代码注释的编写方法利用CSS的Sass预处理器（框架）来制作居中效果CSS的Sass框架中常用的操作符的使用教程使用Sass来编写面向对象的CSS代码CSS框架sass的简单一览CSS的SASS样式编程指南CSS制作框架 Sass 3.4.4 今日发布 学习CSS预处理器:Sass和less进行对比sass简介_动力节点Java学院整理

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网