Sass操作符

  • ==!=检查两个值是否相等。
  • +-*/%对于数字具有通常的数学意义,在科学计算中使用相匹配的单位具有特殊的行为。
  • <<=>>=比较两个数的大小。
  • andornot具有布尔行为。除了falsenull, 其它值Sass都认为是真值。优先级:not > and > or
  • +-/可用于连接字符串。

加法、减法、乘法在运算中有不同类型的单位时,将会报错

进行乘法运算时,两个值单位相同时,只需要为一个数值提供单位即可

.box {
  width:10px * 2px;  
}

“20px*px isn't a valid CSS value.”

//正确写法
.box {
  width: 10px * 2;
}

除法/符号被当作除法运算符时只有以下几种情况:
• 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。width: $width / 10;
• 如果数值被圆括号包围。width: (100px / 2);
• 如果数值是另一个数学表达式的一部分。width: 100px / 2 + 2in;

颜色运算

所有算数运算都支持颜色值,并且是分段运算的

  • color: #010203 + #040506;计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09, 并且被合成为color: #050709;
  • color: #010203 * 2;计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06, 并且被合成为color: #020406;
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基础 声明变量 普通变量 默认变量 变量覆盖:只需要在默认变量之前重新声明下变量即可 变量的调用 局部变量和全局变...
    Jill1231阅读 1,316评论 0 1
  • SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...
    吴吃辣阅读 206评论 0 0
  • 1、SCSS 是 Sass 的新语法格式,从外形上来判断他和 CSS 长得几乎是一模一样,代码都包裹在一对大括号里...
    夜幕小草阅读 1,769评论 2 10
  • Sass简介 Sass是一个CSS预处理器,CSS预处理器是用一种专门的编程语言,进行页面样式设计,然后再编译成正...
    gakiww阅读 277评论 0 2
  • 本文简单的介绍SASS预处理语言,更多的应用请参考官方文档 一、什么是SASS 二、为什么使用SASS 三、安装S...
    CharlesDarwin阅读 477评论 0 0