1、概念:
变量可以看作一个保存数据的容器,可以在代码中重复使用
2、作用:
一处改,处处改
3、语法:
定义变量 $变量名:数据;
-
先定义变量,在进行使用
$mycolor:pink;
$myborder:1px solid red;
.box1{
width:100px
height:100px
background-color:$mycolor
}
.box2{
width:200px
height:100px
background-color:$mycolor;
border:$myborder;
}
.box3{
width:300px
height:100px
background-color:$mycolor
}
变量可以是任意的css属性值,比如100px,red等,也可以是复合属性值,比如:1px solid red 等
变量命名规则:
-
是以数字、字母、_或-构成
-
不能以数字开头,不能包含其他特殊符号
-
尽量见词达意
需要先在文件开头定义变量,再使用变量
sass语法中可以进行数学运算,符号前后加空格,不需要calc()
乘法运算不需要写单位