首页 > 开发 > CSS > 正文

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

2024-07-11 08:33:14
字体:
来源:转载
供稿:网友

赋值操作符

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

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

算术操作符

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

操作符 简介
+
-
*
/
% 取余

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

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

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

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

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

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

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

CSS Code复制内容到剪贴板
  1. h2 {        // 不执行除法操作,原样输出   
  2.     font-size: 16px / 24px;       
  3.     // 使用插值语法之后,原样输出        font-size: #{$base-size} / #{$line-height};    
  4.        // 使用括号包裹之后,执行除法操作   
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表