我掏空了书签，整理了 30 个超级实用的网站

安装

npm install sass --save
npm install sass-loader --save

变量

Sass 允许使用变量，所有变量以$开头。

$blue: #1875e7;
div {
  color: $blue;
}

如果变量镶嵌在字符串中，就写在#{}。

$side: left;
div {
  margin-#{$side}: 20px;
}

运算

$base: 10px;
div {
  margin: $base + 20px;
}

嵌套

Sass 允许选择器嵌套。

.father {
  .child {
    color: red;
  }
}

.section {
  &__title {
    color: blue;
  }
  &__subtitle {
    color: lightblue;
  }
}

伪类嵌套

div {
  &:hover {
    color: orange;
  }
}

属性嵌套

div {
  margin: {
    left: 10px;
    top: 20px;
  }
}

继承

@extend

.div1 {
  background-color: #fee;
}

.div2 {
  @extend .div1;
  border-width: 3px;
}

mixin

@mixin和@include

@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul {
  @include reset-list;
}

可以指定参数和缺省。

@mixin reset-list($space: 5px) {
  margin: $space;
  padding: 0;
  list-style: none;
}

ul {
  @include reset-list(10px);
}

插入文件

@import

@import 'foundation/code.sscss';

判断语句

@if&@each

$isSafety: true;
div {
  @if $isSafety {
    color: green;
  } @else {
    color: red;
  }
}

循环语句

@each

$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .font-#{$size} {
    font-size: $size;
  }
}

@for

@for $i from 1 to 4 {
  li:nth-child(#{$i}) {
    margin-left: $i * 10px;
  }
}

---

链接：

Sass

SASS用法指南

作者：吾儿滨滨

微信：abcmeego

公众号：数字攻略