在各处看相关的文档,为了加深印象,就记录下来
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未定义
还没有切实用到这个性能,但是先记录一下再说吧
$color : red ;
$color : yellow ;
p{ color : $color ; }此时是yellow,因为代买从上到下执行,下方会覆盖上方的
$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 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) ;}
}