Angular系列一 scss小录

Variable

$danger: hsl(0,50%,50%);
#main{
	#left-aside{
		.btn-danger {
			background-color: $danger;
		}
	}
}

IF ELSE

 // 场景式文本
 @mixin text-effect($val) {
    @if $val == danger {
      color: red;
    }
    @else if $val == alert {
      color: yellow;
    }
    @else if $val == success {
      color: green;
    }
    @else {
      color: black;
    }
  }
  // 边框线场景
  @mixin border-stroke($val) {
    @if $val == light {
      border: 1px solid black;
    }
    @else if $val == medium {
     border: 3px solid black;
    }
    @else if $val == heavy {
      border: 6px solid black;
    }
    @else {
       border: none;
    }
  }

For

@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}
 @for $j from 1 through 5 {
    .text-#{$j} { font-size: 15px * $j} 
  }

While

  $x: 1;
  @while $x < 13 {
    .col-#{$x} { width: 100%/12 * $x;}
    $x: $x + 1;
  }
  $x: 1;
  @while $x < 6 {
    .text-#{$x} { font-size: 15px * $x;}
    $x: $x + 1;
  }

Each

$colors: (color1: blue, color2: red, color3: green);

@each $key, $color in $colors {
  .#{$color}-text {color: $color;}
}
$colors: (color1: blue, color2: black, color3: red);
@each $key, $color in $colors {
  .#{$color}-bg {background-color: $color;}
}

浏览器别称属性

盒子阴影

@mixin box-shadow($x, $y, $blur, $c){ 
    -webkit-box-shadow: $x $y $blur $c;
    -moz-box-shadow: $x $y $blur $c;
    -ms-box-shadow: $x $y $blur $c;
    box-shadow: $x $y $blur $c;
 }
div {
  @include box-shadow(0px, 0px, 4px, #fff);
}

盒子圆角

 @mixin border-radius($radius){
    -ms-border-radius:     $radius;
    -moz-border-radius:    $radius;
    -webkit-border-radius: $radius;
            border-radius: $radius;
  }
  div{
    @include border-radius(15px);
  }

继承Extends

.panel{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
.big-panel{
  @extend .panel;
  width: 150px;
  font-size: 2em;
}