SCSS基础

$

• 定义变量，变量名：变量值

如果变量嵌套在字符串中,则必须写在#{}里面:

$m-r:right;
body{
    width:200px;
    height:200px;
    margin-#{$m-r}: 40px;
    postion:absolute;
    #{$m-r}:0;
}

注:属性嵌套必须是复合属性.

想要给属性加悬停不能直接在属性名后面加:hover,需要使用&来表示父级元素的属性名称

button{
    		width:100px;
            height:100px;
            padding: 10px 20px;
            margin-#{$m-r}: 40px;
            #{$m-r}:0;
            &:hover{
                background-color:yellow;
            }

计算

//加法
margin: 20px + 2px;
//减法
font-size: 16px - 2;
//乘法
padding: 2px * 4;
//除法必须加小括号
border: (10px / 2) solid;
//取绝对值
margin: abs(-10px);
//四舍五入
margin: round(3.6px);
//向上取整
margin: ceil(3.2px);
//向下取整
margin: floor(3.999px);
//计算百分比
width: percentage(650px/1000px);

@mixin

定义一个混合.参数名:默认值