Sass进阶-（数据类型，变量运算，mixin）

数据类型

• map

$maps:( color:red , borderColor:blue );
body{
  background:map-get($maps,color);
  border-color:map-get($maps,borderColor);
}

• 
  
• list
  

可以用空格分开或者逗号分开或者括号分开

$paddings : 5px 10px 5px 10px;
body {
    border : 1px solid red;
    padding : (10px 20px) (10px 20px);
    margin : 10px,20px 30px 40px;
    /*如果我们只想取一个值 如:*/
    padding-left : nth($paddings,1);
    /*注意：索引是从1开始的不是从0.*/
}

• 数字类型

$n1 : 1.23;
$n2 : 14px;
$n3 : 134;
span{
font-size : $n2;
}

• 字符串类型

$s1 : hongtao;
$s2 : 'hongtao';
$s3 : "hongtao";

.#{$1}{
    font-size : $n2;
}

• boolean类型

$b : true;
$f : false;

• null

 $null : null;
 body{
    @if $null ==null {
        font-size : $n2;
    }
 }

• color

$c1 : blue;
$c2 : #ccc;
$c3 : rgba(0,0,0,.5);

变量操作

“==”,”!=”
判断相等或者不等，支持所有数据类型

---

“<”,”>”,”<=”,”>=”
仅仅支持数字类型

---

四则运算+ - * / %

$w1 : 14px;
$w2 : 20px;

span {
    width : $w1 + $w2;
    /*注意：要空格*/
}

/*如果需要连字符*/

a:hover {
    cursor : e + -resize;是一样的
}

$tao : tao;
p:after{
/*字符串内要用#{}*/
content : 'hello,hong#{$tao}'
}

p {
/*这是标准css 不会运算*/
font: 20px/10px;
}

span {
/*需要注意的*/
width : $w1/2;
width : round($w1)/2;
height : (100px/2);
}

mixin

• 直接看示例吧

@mixin cont($color:red,fontSize:14px){
    color:$color;
}
body {
@include cont(#fff,18px);
/*或者*/
@include cont(fontSize:18px);
}

/*多值参数*/
@mixin box-shadow($shadow){
    -moz-box-shadow : $shadow;
    -webkit-box-shadow : $shadow;
    box-shadow : $shadow;
}

.shadows{
    /*这么写会报错，因为参数只有一个，下面的逗号会被当作俩个参数*/
    @include box-shadow:(0px 4px 6px #ccc,0px 5px 7px red);
}
/*为了解决上述问题*/
@mixin box-shadow($shadow...){/*表示这个参数含有多条属性的*/
    ...
}

/*传递内容*/
@mixin style-for-iphone{
        @medio only screen and (min-device-width:320px) and (max-device-width:568px){
        @content
    }
}

@include style-for-iphone{
    font-size : 12px;
}