sass变量

在各处看相关的文档，为了加深印象，就记录下来

全局变量和局部变量

sass中默认是全局变量

$color : green ;

p{ $color : red ; color : $color ; }此时color为red

a{ color : $color; } color为red

但也存在局部变量的特征：

p{ $color : red ; color : $color ; } 此时color为red

div{ color : $color ; } color未定义

变量默认值 !default

还没有切实用到这个性能，但是先记录一下再说吧

没有!default的情况

$color : red ;

$color : yellow ;

p{ color : $color ; }此时是yellow，因为代买从上到下执行，下方会覆盖上方的

有!default的情况

$color : red ;

$color : yellow !default ;

p{ color : $color ; }此时是red ，这种情况，默认是!default，如果在！default上方有赋值，就优先选择上方的

有一个新发现：!default的应用，在@import的时候有作用，比如写一个插件，在style.scss中，然后在正常的scss中需要引入这个插件，就需要在style.scss中定义变量的时候，用上!default，这样如果需要修改这个量，可直接在引入@import之前，写上这个变量修改后的值，便可直接取代!default的值

$imgstyle = 5px ;

@import ‘style.scss’

mixin片码段

@mixin box-sizing( $sizing ) { 

-webkit-box-sizing : $sizing ;

-moz-box-sizing : $sizing ;

box-sizing : $sizing ;

 }

引用：

.box-border{ border : 1px solid #ccc ; @include box-sizing( box-border ) }

编译之后:

.box-border{ 

border : 1px solid #ccc

 

-webkit-box-sizing : box-border ;

-moz-box-sizing : border : box-border ;

box-sizing : border : box-border ;

 }

变量后边加...

这是一个为CSS3设计的属性，比如css3中：box-shadow:0 0 3px rgba(0,0,0,0.3),inset 0 0 3px rgba(255,255,255,0.3);这是让@mixin给box-shadow传参数，就需要用到...了

@mixin box-shadow( $shadow... ){

-webkit-box-shadow:$shadow;

-moz-box-shadow:$shadow;

box-shadow:$shadow;

}

变量用#{}包裹

$btnClass : btn !default ;

$borderDirection : top !default ;

.#{$btnClass}{ border-#{borderDirection}:1px solid #ccc ; }

既可以被解析成.btn{ border-top : 1px solid #ccc ; }

多个变量一起声明

$myColor : red blue  !default;

a{

color:nth($myColor,1);

&:hover{ color:nth($myColor,2) ;}

}