.box{
    width: 100px;
    span{
        font-size: 20px;
    }
}

// 1.注释：scss支持//注释
// 也支持/**/注释
//注释不会被编译，/**/会被编译

/*
这也是注释
*/

// 2.变量
// 必须以$开头， 后面加上！default那就代表这个是当前变量的默认值。
// 单值变量
// $c:red;
// div{
//     width:100px;
//     color: $c;
// }

// 多值变量
// $c:red yellow;
// div{
//     width:100px;
//     color: nth($c, 1);
// }
// nth()方法，第一个参数为复杂变量，第二个参数为复杂变量的第几个值，从1开始数
// 一般我们都将变量当做属性值来使用，但是也有极特殊情况下我们会将变量当做class里的类来使用。
// 这时候，我们必须以#{$name}的方式来使用变量名

// list变量，类似于js的数组
// $l:(1,100,20,red)(2,50,30,yellow)(3,150,10,green)(4,200,40,blue)(5,30,10,pink);
// @each $i,$w,$h,$c in $l {
//     .box#{$i}{
//         width:$w + px;
//         height:$h + px;
//         color:$c;
//     }
// }

// map变量，类似于js的对象
// $m:(h1:30px,h2:20px,h3:10px);
// @each $key,$val in $m {
//     #{$key}{
//         font-size:$val;
//     }
// }


// 3.嵌套
// ul.list
//     li
//     li
//     li
//     li.last
// .list li{border:solid 1px black}
// .list .last{border: none;}

// 选择器的嵌套
// .list{
//     li{
//         border: solid 1px black;
//         &:hover{
//             background: red;
//         }
//     }
//     .last{
//         border:none;
//     }
// }

// 属性的嵌套
// .box{
//     border:{
//         left:{
//             width:10px;
//             color:red;
//             style:solid;
//         }
//         right:{
//             width:20px;
//             color:yellow;
//             style:solid;
//         }
//     }
// }

// 4.混合mixin，类似于js的函数，但是没有返回值
// @mixin abc ($deg){
//     -webkit-transform: $deg;
//     -moz-transform: $deg;
//     -ms-transform: $deg;
//     -o-transform: $deg;
//     transform: $deg;
// }
// .box{
//     @include abc(rotate(90deg));
// }
// .box1{
//     @include abc(translate(100px));
// }

// 5. 继承
// .box1{
//     width:100px;
//     height:100px;
//     background: red;
// }
// .box2{
//     @extend .box1;
//     background: yellow;
// }

// 6. 运算
// $c:red;
// .box{
//     color:$c - 50;
//     width:100*2 + px;
//     height:100px / 16px * 1rem;
//     margin:50px / 16px * 1rem;
// }

// 7. 函数
// $fz:40px;
// html{
//     font-size:$fz;
// }

// @function pTr($px){
//     @return $px / $fz * 1rem;
// }
// .box{
//     width:pTr(89px);
//     height:pTr(89px);
// }

// 8.引入并合并scss
// @import "style.scss";

// .box{
//     width:100px;
// }

// .box{
//     width:300px;
// }

// .box{
//     hahahaha:12123
// }

html{
    background: red;
    .box{
        width:100px;height:100px;background: yellow;
    }
}