sass-变量

1.定义

    1.变量以美元符号($)开头,后面跟变量名
    2.变量名是不以数字开头的可包含字母、数字、下划线(_)、横线(-)
    3.写法同css,即变量名和值之间用冒号(:)分隔
    4.变量需先定义，后使用

2.使用

    $font-size:20px;
    $font_size:18px;
    在这里_与-是同一个意思 所以 $font-size 与$font_size是同一个变量 值最终变为后面的18px;

3.变量的值类型

    sass支持6种主要数据类型
    
    1> 数字 1 2 3 10px 10% 10pt 等css常见值(可带单位)
    2> 字符串 "foo" 'bar' baz (带引号 与 无引号)
    3> 颜色值 blue #fff rgba(0,0,0,0.5) rgb(255,255,255) (css颜色值)
    4> 布尔型 true false
    5> 空值 null
    6> 数组(list) 用空格或逗号作分隔符 1.5em 1em 0 2em,Helvetica,Arial,sans-serif 
    7> maps (键值对) (keys1:value1,key2:value2)
    
    
    例:
    $layer-index:10;    //数字
    $border-width:3px;  //数字
    $font-base-family:'Open Sans',Helvetica,Sans-Serif;  //数组 ->存的字符串
    $top-bg-color:rgba(255,255,3,.6);     //颜色值  
    $block-base-padding:6px 10px 6px 10px;  //数组
    $blank-mode:false;        //布尔值 true false
    $val:null;  //值null是其唯一的值 他代表缺少值 通常由函数返回以指示缺少结果   
    $color-map:(color1:red,color2:yellow,color3:green); //maps 

4.范围(作用域)

    /* <1> 全局 or 局部 */
    
    $variable:globalVariable;  //全局变量 定义在外部

    p{
        $localVariable:localVariable;  //局部变量 定义在内部
    }
    
    
    /* <2> 全局与局部变量名冲突 */
    $variable:globalVariable; //全局
    
    p{
        $variable:localVariable; //局部
        content:$variable;       //值为 localVariable 最近原则 在这里有局部则使用局部
    }
    .p1{
        content:$variable;      //值为 gloablVariable; 没有局部 使用 全局
    }
    
    /* <3>!global 关键字 将局部变为全局变量 */
    p{
        $variable:pLocalVariable !global;  //加了!global则变为全局  
    }
    
    span{
        content:$variable;   //值为 pLocalVariable; 不报错
    }
    
    /* <4>使用!global使得 全局与局部命名冲突时 相当于局部给全局重新赋值 */
    
    $variable:globalVariable;
    p{
        $variable:pLocalVariable !global; //变成全局 与 原冲突 相当于 给全局重新赋值为pLocalVariable    
    }
    
    span{
        content:$variable;    //值为pLocalVariable;
    }

5.变量默认值 !default

    $color:red;
    $type:null;   
    
    $color:blue !default;   //原来有值(red)就使用原来的red 不使用blue
    $type:string !default;  //原来是空值(null)则使用新的值(string)
    
    p{
        color: $color;      //值为red
        content:$type;      //值为string
    }