scss

官方文档 https://www.sass.hk/docs/

@extend 继承

scss中提供了一个单独的选择器

.article a{
  color:blue;
  &:hover{
    color:red;
  }
}

.circle>div{
  width: 100px;
  &>div{
    width: 200px;
  }
}

.article a {color: blue; }
  .article a:hover {color: red; }

.circle > div { width: 100px; }
  .circle > div > div {width: 200px; }

/*# sourceMappingURL=1.css.map */

scss指令

@if

$use-prefix:false;
$theme: dark;
.alert{
  @if $use-prefix{
    -ms-behavior: initial;
    scroll-snap-destination: initial;
  }
  border-width: 20px;
}
body{
  @if $theme == dark{
    background-color: red;
  } @else if $theme == light{
    background-color: green;
  }@else{
    background-color: yellow;
}
}

.alert {
  border-width: 20px; }

body {
  background-color: red; }

/*# sourceMappingURL=1.css.map */

@for

for循环，如果使用from - to，不包含最后的数字，如果是from-through，则会包含最后的数字。

$columns:4;
@for $i from 1 to $columns{
  .col-#{$i}{
    width: 100% / $columns * $i ;
  }
}

.col-1 {
  width: 25%; }

.col-2 {
  width: 50%; }

.col-3 {
  width: 75%; }

/*# sourceMappingURL=1.css.map */

@each

遍历数组lists

$icons:success error warning;
@each $icon in $icons{
  .icon-#{$icon}{
    background-image: url(../img/#{$icon}.png);
  }
}

.icon-success {
  background-image: url(../img/success.png); }

.icon-error {
  background-image: url(../img/error.png); }

.icon-warning {
  background-image: url(../img/warning.png); }

/*# sourceMappingURL=1.css.map */

@while

$i: 8;
@while $i > 0 {
  .item-#{$i}{
    width: 5px * $i;
  }
  $i: $i - 2;
}

.item-8 {
  width: 40px; }

.item-6 {
  width: 30px; }

.item-4 {
  width: 20px; }

.item-2 {
  width: 10px; }

/*# sourceMappingURL=1.css.map */

@function

$colors:(light:#fff,dark:#000);
@function color($key){
  @return map-get($map: $colors, $key:$key )
}
body{
  background-color: color(light);
}

body {
  background-color: #fff; }

/*# sourceMappingURL=1.css.map */