sass变量

xiaoxiao2021-02-28  31

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

全局变量和局部变量

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) ;}

}

 

 

 

 

转载请注明原文地址: https://www.6miu.com/read-2400125.html

最新回复(0)