欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-25 16:28:54
number类型 编译后 color类型: 编译后 string类型 编译后 list数组类型 nth(list, num) 获取list数组中的下标为num的元素 注意num下标是从1开始的 编译后 index(list, str) 返回str在list数组中的下标 编译后 map 数组类型(有点 ......

number类型

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

 

 

编译后

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

 

 

color类型:

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

 

 

编译后

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

 

 

string类型

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

 

 

编译后

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

 

 

list数组类型

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

注意num下标是从1开始的

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

 

 

编译后

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

 

 

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

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

 

 

编译后

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

 

 

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

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

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

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

 

 

sass加减乘除基本运算

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

 

 

编译后

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

 

 

除法常见问题:

这种写法无法正常计算

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

 

 

编译后:

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

 

 

正确写法:

运算用圆括号括起来

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

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

 

 

编译后

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

 

 

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

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

 

 

编译后

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

 

 

混合运算:

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

 

 

编译后

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

 

 

颜色运算:

mix() 混合色

red() 取红色值

rgb() 拼接成rgb色

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

 

 

编译后

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

 

 

字符串运算:

字符串拼接 加号

 

混合宏 mixin

一般mixin(简单)

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

 

 

编译后

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

 

 

嵌套mixin

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

 

 

编译后

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

 

 

参数mixin

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

 

 

编译后

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