SASS - 操作符
- SASS – 简介
- SASS – 环境搭建
- SASS – 使用Sass程序
- SASS – 语法
- SASS – 变量
- SASS- 局部文件(Partial)
- SASS – 混合(Mixin)
- SASS – @extend(继承)指令
- SASS – 操作符
- SASS – 函数
- SASS – 输出格式
本文介绍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 - 操作符的更多相关文章
- SASS - 输出格式
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 函数
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - @extend(继承)指令
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 混合(Mixin)
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 语法
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 使用Sass程序
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 简介
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS - 环境搭建
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
- SASS- 局部文件(Partial)
SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...
随机推荐
- 整合Spring时Service层为什么不做全局包扫描详解
合Spring时Service层为什么不做全局包扫描详解 一.Spring和SpringMVC的父子容器关系 1.讲问题之前要先明白一个关系 一般来说,我们在整合Spring和SpringMVC这两个 ...
- Python+opencv+pyaudio实现带声音屏幕录制
原文链接:https://blog.csdn.net/zhaoyun_zzz/article/details/84341801 Python+opencv+pyaudio实现带声音屏幕录制原创luke ...
- 第1课 VMware的NSX全面落地软件定义网络SDN
SDN的定义: 即软件定义网络(Software Defined Network)的缩写,它是一种基于网络架构的创新,一种在已存在物理传输网络之上的抽象形态,它是一种体系结构,它是众多网络虚拟化技术中 ...
- Day5-T1
原题目 小月言要过四岁生日了,她的妈妈为她准备了n根火腿,她想将这些火腿均分给m位小朋友,所以她可能需要切火腿.为了省事,小月言想切最少的刀数,使这n根火腿分成均等的m份.请问最少要切几刀? 第一行一 ...
- jsp获取web的跟路径
我实现了一个listener,此listener在tomcat启动的时候读取项目的配置文件,配置文件是xml.但是读取解析的功能是在另一个工具类实现的. 这个普通的工具类B,如何获取到当前web的跟路 ...
- Spark Shuffle 过程
本文参考:http://www.cnblogs.com/cenyuhai/p/3826227.html 在数据流动的整个过程中,最复杂最影响性能的环节,就是 Shuffle 过程,本文将参考大神的博客 ...
- 项目启动报错:Communications link failure
2017-12-29 10:43:19,776 ERROR [com.alibaba.druid.pool.DruidDataSource] - <init datasource error, ...
- delphi10.2 命令行编译x64脚本
Build.bat @echo off @echo delphi x64编译测试 @cd /d %~dp0 @echo 设置Delphi参数信息 @set SourcePath=%~dp0.\src ...
- L2d插件
<script src="https://blog-static.cnblogs.com/files/yyhh/L2Dwidget.min.js"></scrip ...
- LeetCode141 环形链表(Java—HashSet简单应用or双指针)
题目: 判断给出的链表中是否存在环. 思路: 1. 遍历整个链表,将走过的节点的内存地址保存下来,如果再次走到同样的内存地址,说明链表中有环.时间复杂度为O(n). 2. 设置两个指针,fast指针每 ...