神器Scss(Sass)使用方法

• 将$yellow当作一个变量 （后面加 !default 是指默认值）

$yellow: yellow !default;

• &表示当前作用域的父级元素

• @each #{$name} 遍历+插值

$colors:(yellow:#fdd83a, grey:#ccc) ;
@each $name,
$value in $colors {
  .btn-#{$name} {
    background-color: $value;
    border: none !important;
    box-shadow: 0.3vw 0.3vh $value;
  }
  .bg-#{$name} {
    background-color: $value;
  }
  .#{$name} {
    color: $value;
  }
}

• @mixin @include 混合+插值

@mixin overflow ($val) {
  .overflow-#{$val} {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: $val;
  }
}
div{
  @include overflow (3);
}

• @mixin 默认值

@mixin opacity($opacity:50) {
    opacity: $opacity / 100;
    filter: alpha(opacity=$opacity);
  }
  .opacity{
    @include opacity; //参数使用默认值
  }
  .opacity-80{
    @include opacity(80); //传递参数
  }

//css style
//-------------------------------
.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50); }

.opacity-80 {
  opacity: 0.8;
  filter: alpha(opacity=80); }

• 继承 extend

input,
input:focus,
input:active,
input:hover {
  border-radius: 20px;
  border-style: none;
  padding: 5px 15px;
  *@extend* .bg-grey;
  width: 50%;
}

• @at-root 跳出

//sass style
//-------------------------------
.child{
    @at-root .parent &{
        color:#f00;
    }
}

//css style
//-------------------------------
.parent .child {
  color: #f00;
}

• 多值变量

//sass style
//-------------------------------
$linkColor:         #08c #333;
a{
  color:nth($linkColor,1);

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

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

• @if @for 判断 for循环

@for $i from 1 through 3 {
    .parent {
        @if $i!=2 {
            &>.child:nth-child(#{$i}) {
                width: 10vw * $i;
            }
        }
    }
}

//css style
//-------------------------------
.parent > .child:nth-child(1) {
  width: 10vw; }

.parent > .child:nth-child(3) {
  width: 30vw; }