eleme-ui 之 sass的学习

1.颜色

• rgba：函数
• [mix ( color-2,[$weight])]：把两种颜色混合在一起

rgba($red,$green,$blue,$alpha)//将一个rgba颜色转译出来 
rgba($color,$alpha) //将一个Hex颜色转换成rgba颜色

background: mix($--color-white, $color, 90%);
// eleme-ui button按钮的hover 效果就是把白色和基础色按照90%的混合生成的颜色
// 这样做的好处：
//只需要定义基础色系 primary success warning danger等 ::hover & ::active 等状态就可以在基础色系的基础上去做颜色的混合 不用手动去定义 3n种颜色

2.@at-root 跳出嵌套

// sass
button{
  color:#fff;
  @at-root{
    span{color:#000}
  }
}

//css
button{ color:#fff;}
span{color:#000}

3.@content

有点类似vue的slot插槽用于特殊的内容通过外部传进来

// sass
$bbb: white;
@mixin getColor($aaa:black){
  color: $aaa;
  width: 15px;
  @content;
}

//css
.cla{
    @include getColor(red) {height:15px;}
}

4.% + @extend

常用的@mixins 和@include 其实是拷贝代码 会产生很多冗余代码，% + @extend会合并申明

@mixin center-block { margin-left: auto; margin-right: auto; }

#header{ width:1000px; @include center-block; } .gallery{ width:600px; @include center-block; }


%center-block { @include center-block; }
%color-bulue { font-color:blue }

#header1{ width:1000px; @extend %center-block;@extend %color-bulue } .gallery1{ width:600px; @extend %center-block;@extend %color-bulue }
.aaa{@extend %color-bulue}

#header {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.gallery {
  width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.gallery1, #header1 {
  margin-left: auto;
  margin-right: auto;
}

.aaa, .gallery1, #header1 {
  font-color: blue;
}

#header1 {
  width: 1000px;
}

.gallery1 {
  width: 600px;
}

5.@function + @return 用于右边值的计算

@function pxToRem($px, $base: 16) { @return ($px / $base) * 1rem; }
.bbb{width:pxToRem(16)}



.bbb {
  width: 1rem;
}