变量声明
只需要记住一句话sass中变量的声明离不开美刀$
声明样例：
$baseColor:red
$baseHeight:10px
div {
color:$baseColor;
height:$baseHeight
}
数据类型
scss 包含以下几种数据类型
数字： 2 | 2px字符串： bar "bar" 'bar' 单引号 双引号 无引号三种布尔： true | false空值： null数组（列表）：用空格或者逗号隔开 1em 2em,3em颜色：blue | #fff | rgba(255,255,255,1) |rgb(255,255,255) | hsl(120, 100%, 50%) | hsl(120, 100%, 50%, 0.3);maps：（key:value,key1:value1) | (key:(key1:value1))
数字类型
数字在css中应用较为广泛，例如大小、宽高、内外边距等。scss中的数字类型了可以进行一些加减乘除运算
例子
$width:100px; // 定义变量$width,值为100px
//在选择器中使用
.box{
padding:$width / 10;
width:$width + 20px;
height:$width * 3;
margin-top:$width - 90px;
}
//编译成css代码
.box{
padding:10px;
width:120px;
height:300px;
margin-top:10px;
}
注意：在进行加减乘除运算的时候要注意单位兼容问题，例如 *12em + 12px* 会报单位兼容错误。
加减法
$num:10px;
$num1:10px;
.box {
width:$num + $num1;
height:$num * 2
}
注意：不同单位会报错
乘法
$num:10px
.box {
width:$num * 10
}
注意：10px * 10px 会报错
除法
$num:10px;
$num1:10px
.box {
width:$num / $num1;
height:$num / 10
}
// 编译成css
.box {
width:1;
height:1px
}
注意：在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值
数字函数
引入：@use "sass:math";
percentage()：将不带单位的数字转换成百分比形式
percentage(.2) -----> 20%
percentage(10px / 100px) ----> 10%
round()四舍五入 和js 中的用法一样
round(2.3em) ----> 2em
round(2.6%) ------>3%
ceil()向上取整
ceil(2.3%) ---->3%
floor()向下取整
floor(2.3%) ------> 2%
abs()绝对值
abs(-2.3%) --->2.3%
min()/max()取最小最大值,有不同单位会报错css中也有这两个方法，处理响应式很好用，可以不同单位
min(10px,100px) ----->10px
max(10px,100px) ----->100px
random()随机数
random() ----->0.023232
字符串
$custor:resize
.box {
custor:$custor
}
// 编译成css
.box {
custor:resize
}
字符串运算
通过+连接
$custor:re
.box {
custor:$custor + size
}
// 编译成css
.box {
custor:resize
}
注意： 如果有引号的字符串和无引号的字符串拼接（有引号+无引号） 结果：引号字符串
如果无引号的字符串和有引号的字符串拼接（无引号+有引号） 结果：无引号字符串
字符串函数
引入：@use "sass:string";
unquote()删除字符串首尾的引号（单引号或双引号），中间的无法删除，如果字符串没有则返回它自身quote()为字符串添加引号，统一变成双引号To-upper-case()转大写To-lower-case()转小写unique-id()生成唯一的idindex($string,$substring)返回指定字符的位置slice($string,$start,$end)字符串截取insret($string,$insert,index)指定位置插入字符串length()获取字符串长度
列表
$list:10px 20px 30px
@each $key in $list {
.item-#{$key} {
width:$key
}
}
// 编译成css
.item-10px
width:10px
}
.item-20px
width:20px
}
.item-30px
width:30px
}
列表函数
引入：@use "sass:list";
length()获取列表的长度, 接收的参数用空格分隔，不能用逗号
$list:2px 2em 3vh
length($list)--> 3
nth($list,$index)获取指定位置的值set-nth($list,$index,$val)设置指定位置的值append($list,$val,[$split])追加元素[$split]分隔符（space-空格、comma-逗号、slash-斜杠
颜色
$color:#ccc
.box {
color:$color
}
颜色运算
$color1:pink;
$color2:blue;
.box {
color:$color1 + $color2
}
// 编译成css
.box {
color:#ffc0ff
}
颜色函数
引入：@use "sass:color";
grayscale($color):设置与颜色具有相同亮度的灰度
grayscale(#7fffd4) -----> #c6c6c6complement($color): 设置颜色的互补色
complement(#7fffd4)------> #ff7faainvert($color,$weight)设置颜色的反色或者负色， $weight 0%-100% 默认100%
invert(white) ---- > blackmix($color1, $color2, $weight)将两个颜色混合 color1颜色越多 默认50%adjust-hue($color, $degrees)以 -360 度到 360 度的度数调整颜色的色调lighten($color, $amount)使用介于 0% 和 100% 之间的量创建更浅的颜色。$amount 参数按百分比提高 HSL 亮度。darken($color, $amount)和lighten相反saturate($color, $amount)使用介于 0% 和 100% 之间的量创建更饱和的颜色。$amount 参数按百分比提高 HSL 饱和度。desaturate($color, $amount)和saturate相反opacify($color, $amount)使用介于 0 和 1 之间的数量创建更不透明的颜色 $amount 参数按照其值提高 Alpha 通道。fade-in($color, $amount)和opacify功能相同 $amount相反transparentize($color,$mount)创建更透明颜色 $amount 参数按照其值降低 Alpha 通道。fade-out($color, $amount)和transparentize功能相同 $amount相反
maps
表示映射类型，常以键值对（key/value)的形式出现，整个映射必须用小括号（）括起来，值与值用逗号分隔。
在 maps 中，一个给定的 key 只能有一个相关的 value，但一个给定的 value 可以被映射到许多不同的 key上。 value 值可以是任何数据类型，包括 maps。
$colorMap:($color1:red,$color2:green)
.box {
color:map-get($colorMap,color1)
}
// 编译成css
. box {
color:red
}
map函数
引入：@use "sass:map";
keys($map)获取所有的key的列表values($map)获取所有的value的列表has-key($map,$key,[$keys...]是否包含某个值，支持深层keyget($map,$key,[$key...]获取对应的key的value值 ，支持深层keyset($map,$key,[$key...],$value)设置对应的key的value，支持深层keyremove($map,$key...)移除多个keydeep-remove($map,$key,$keys...)移除深层的keymerge($map1,$map2)浅层次合并，属性相同 取后者deep-merge($map1,$map2)深层次合并
tips:可能会有人不理解支持深层key什么意思，接下来解释一下
例子：
// 定义一个深层的map ,嵌套三层
$map:($key1:value1,$key2:($key3:($key4:$value4)))
has-key($map,$key2,$key3) 获取map下的key2的values下的key3 对应的value值
Introspection函数
type-of($value)返回类型 number、string 、null、bool、color、list、mapunit($value)返回一个值的单位unitless($value)判断是否有单位comparable($value1,$value2)判断两个值是否可以进行加减合并操作
Miscellaneous函数 三元条件函数
@if($true,$a,$b) 当a, 否则返回$b
插值 #{}
$a:10px
#{$a} ---->10px
@if @else-if @else
$a: 2;
div {
@if $a == 0 {
color: red;
}
@else if $a == 1 {
color:green
}
@else {
color:blue
}
// 编译成css
div {
color:blue
}
@for
@for $i from <start> to <end>
@for $i from <start> through <end>
区别：through 包含end to 不包含
@for $i from 1 to 3 {
.item-#{$i} {
width: 2px * $i
}
}
// 编译成css
.item-1 {
width: 2px;
}
.item-2 {
width: 4px;
}
@while
$number: 3;
@while $number > 0 {
.while-#{$number} {
width: $number * 10px;
}
$number: $number - 1;
}
// 编译成css
.while-3 {
width: 30px;
}
.while-2 {
width: 20px;
}
.while-1 {
width: 10px;
}
@each
$list:10px 20px;
@each $key in $list {
#div-#{$key} {
width:$key
}
}
// 编译成css
#div-10px {
width: 10px;
}
#div-20px {
width: 20px;
}
@mixin/@include
// 不带参数
@mixin bgColor {
background-color:red
}
// 调用
.box {
@include bgColor
}
// 带参数
@mixin widthAndHeight($width:50px,$height:100px) {
width:$width;
height:$height
}
// 调用
div {
@include widthAndHeight(50px,200px)
}
// 编译成css
.box {
background-color:red
}
div {
width:50px;
height:200px
}
@extend 继承
用来继承已经存在的类样式块
.btn {
width:10px
// 使用继承
.box {
@extend .btn
}
// 编译成css
.box {
width:10px
}
%placeholder 占位符
可以取代css 中基类造成代码冗余问题 ，因为%placeholder声明的代码 如果不被@extend 调用 不会产生任何代码
%bgColor {
background-color:red
}
.box{
@extend %bgColor
}
@minxin/@include .class/@extend %placeholedr/@extend 比较
1、如果涉及到变量使用@mixin/@include 2、如果不涉及到变量，建议使用继承，构建一个基类的css 文件
