sass-

Sass

在sass中用$来定义变量

1. 注释为//

2. 变量

定义单值

$r:red;

//引用变量
.box1{
    color:$r;
}

多值变量

$c:red green #ccc  // 多值用空格隔开

// 使用
.box{
    color:nth($c,1)   //nth()是取值的函数，取谁的对几个值
  }

复杂变量

$l:(box2 100px red)(box3 200px green)(box4 50px blue)
@each $a,$b,$c in $l{
        .#{$a}{
            with:$b;
            color:$c;
            }
        }
// 多个多值变量用括号隔开，使用的时候用@each去遍历，遍历的时候，每个小括号有几个多值，就定义几个变量。#{}取值

map变量

$m:(h1 20px)(h2 28px)
 @each $key,$val in $m{
        #{$key}{
            font-size:$val;
            }
        }

3.元素嵌套 用的最多，没有之一

.list{
    list-style:none;
    li{
        border:1px solid red;
    }
    .last{
        border:none
    }
    &:hover{
        color:red;   // &表示当前元素
    }
}

// 属性嵌套
.box{
    border:{
        left: 2px;
        width: 20px;
        left:{
            width: 20px;
        }
    }

4.封装代码块mixin

@mixin c1{
    width:100px;
    color:red;
}
.box1{
    @include c1;
}

5.运算

.box{
    width:100px / 16px * 1rem;
}

6.函数

@function prt(#px){
	@retuen $px  / 16px * 1rem;
}


.box{
    width: ptr(100px);
    height: ptr(200px);
}

7.导入外部sass

@import “./style.css”;