sass常见的基本数据类型+加减乘除基本运算

number类型

 

 

编译后

 

 

color类型:

 

 

编译后

 

 

string类型

 

 

编译后

 

 

list数组类型

nth(list,num) 获取list数组中的下标为num的元素

注意num下标是从1开始的

 

 

编译后

 

 

index(list,str) 返回str在list数组中的下标

 

 

编译后

 

 

map 数组类型(有点类似js中的对象)

map-get(map,key) 获取指定key对应的属性值

@each $key,$value in map{ } 遍历map数组

 

 

sass加减乘除基本运算

 

 

编译后

 

 

除法常见问题:

这种写法无法正常计算

 

 

编译后:

 

 

正确写法:

运算用圆括号括起来

在乘法和除法中,多个数值只要写一个单位即可

 

 

编译后

 

 

通过变量方式运算可以不加括号

 

 

编译后

 

 

混合运算:

 

 

编译后

 

 

颜色运算:

mix() 混合色

red() 取红色值

rgb() 拼接成rgb色

 

 

编译后

 

 

字符串运算:

字符串拼接 加号

 

混合宏 mixin

一般mixin(简单)

 

 

编译后

 

 

嵌套mixin

 

 

编译后

 

 

参数mixin

 

 

编译后

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型 ...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...