本文介绍Sass操作符(或运算符)。包括加法、减法、除法、等号操作符等。

等号操作符

所有数据类型都支持等号运算符:

== 等于
!= 不等于

除了等号运算符之外,每种数据类型还支持各自的一组操作符。

数字操作符

SassScript支持以下标准的算术操作符:

+
-
*
/
% 取模

算术运算符的一个常见用法是宽度计算。

例如,下面的例子计算宽度百分比:

.container {
width: 100%;
} article {
float: left;
width: 700px / 960px * 100%;
} .sidebar {
float: right;
width: 200px / 960px * 100%;
}

经过编译输出以下CSS代码:

.container {
width: 100%; } article {
float: left;
width: 72.91667%; } .sidebar {
float: right;
width: 20.83333%; }

使用算术操作符时,参与运算的数据单位必须相同。否则会报错(例如,一个用px,另一个用em):

 .box-big {
font-size: 22px + 4em; // Error: Incompatible units: 'em' and 'px'.
width: 30% - 20px; // Error: Incompatible units: 'px' and '%'.
}

颜色操作符

算术操作符也适用于颜色。计算颜色时,参与运算的是R, G, B分量,而不是整个六位数颜色值。

例如,当把两个十六进制颜色值相加时,将依次把每一对分量值相加。

示例:

body {
color: #991100 + #002299;
}

经过编译输出以下CSS代码:

body {
color: #993399; }

还可以对颜色和数字应用运算符。例如

body {
color: #112233 * 2;
}

经过编译输出以下CSS代码:

body {
color: #224466; }

字符串操作符

+操作符还可以用来连接字符串。

img {
cursor: zoom + -in;
}

经过编译输出以下CSS代码:

img {
cursor: zoom-in; }

逻辑运算符

Sass还支持对布尔值使用and、or和not等运算符。

SASS - 操作符的更多相关文章

  1. SASS - 输出格式

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  2. SASS - 函数

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  3. SASS - @extend(继承)指令

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  4. SASS - 混合(Mixin)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  5. SASS - 语法

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  6. SASS - 使用Sass程序

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  7. SASS - 简介

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  8. SASS - 环境搭建

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  9. SASS- 局部文件(Partial)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

随机推荐

  1. 整合Spring时Service层为什么不做全局包扫描详解

    合Spring时Service层为什么不做全局包扫描详解 一.Spring和SpringMVC的父子容器关系 1.讲问题之前要先明白一个关系 一般来说,我们在整合Spring和SpringMVC这两个 ...

  2. Python+opencv+pyaudio实现带声音屏幕录制

    原文链接:https://blog.csdn.net/zhaoyun_zzz/article/details/84341801 Python+opencv+pyaudio实现带声音屏幕录制原创luke ...

  3. 第1课 VMware的NSX全面落地软件定义网络SDN

    SDN的定义: 即软件定义网络(Software Defined Network)的缩写,它是一种基于网络架构的创新,一种在已存在物理传输网络之上的抽象形态,它是一种体系结构,它是众多网络虚拟化技术中 ...

  4. Day5-T1

    原题目 小月言要过四岁生日了,她的妈妈为她准备了n根火腿,她想将这些火腿均分给m位小朋友,所以她可能需要切火腿.为了省事,小月言想切最少的刀数,使这n根火腿分成均等的m份.请问最少要切几刀? 第一行一 ...

  5. jsp获取web的跟路径

    我实现了一个listener,此listener在tomcat启动的时候读取项目的配置文件,配置文件是xml.但是读取解析的功能是在另一个工具类实现的. 这个普通的工具类B,如何获取到当前web的跟路 ...

  6. Spark Shuffle 过程

    本文参考:http://www.cnblogs.com/cenyuhai/p/3826227.html 在数据流动的整个过程中,最复杂最影响性能的环节,就是 Shuffle 过程,本文将参考大神的博客 ...

  7. 项目启动报错:Communications link failure

    2017-12-29 10:43:19,776 ERROR [com.alibaba.druid.pool.DruidDataSource] - <init datasource error, ...

  8. delphi10.2 命令行编译x64脚本

    Build.bat @echo off @echo delphi x64编译测试 @cd /d %~dp0 @echo 设置Delphi参数信息 @set SourcePath=%~dp0.\src ...

  9. L2d插件

    <script src="https://blog-static.cnblogs.com/files/yyhh/L2Dwidget.min.js"></scrip ...

  10. LeetCode141 环形链表(Java—HashSet简单应用or双指针)

    题目: 判断给出的链表中是否存在环. 思路: 1. 遍历整个链表,将走过的节点的内存地址保存下来,如果再次走到同样的内存地址,说明链表中有环.时间复杂度为O(n). 2. 设置两个指针,fast指针每 ...