Sass基本使用的方法

$width:300px;//当前文件定义的变量
$color:bule;

.div{
    height:$width; //使用
    $widthinner:100px;
}

.div{
    height:$widthinner;//这里拿不到的,因为这个变量，是在另外一个大括号里面,有作用域的限制
}

$color:bule !default;默认是蓝色，但是如果有新的sass文件，相同的变量名则可以任意覆盖


字符串变量
$str:' hello.jpeg' ;
/*string*/
.div {
    background-image: url( 'images/ '+$str);
}


加法
$num1: 100px;
$num2: 200px;
$width: $num1 + $num2;
.div {
     width: $width;
}


混入的用法


/*-般mixin*/
@mixix helloMixin {
     display: inline-block;
     padding:10px;
     font: {
       size: 20px ;
       weight: 500;
       };
     color: red;
}

//使用方法
.div {
    padding:10px;//如果mix里面也有相同的。两种都会编译出来
    @include helloMixin;
}





传递参数

amixin sexy-border ($color, $width) {
   border: {
      color: $color;
      width: $width;
      style :dashed;
};
//使用并且传入参数
.div{
    @include sexy-border('red’,1px)
}