Sass是一种css预处理器

一、可以使用变量

$primary-color: #3498db;
$font-stack: Arial, sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

二、style结构可以嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
    }
  }

  a {
    text-decoration: none;
  }
}

三、混合器

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

四、继承

.error {
  border: 1px solid #f00;
  background-color: #fcc;
}

.error--important {
  @extend .error;
  font-weight: bold;
}

五、导入

@import "reset";
@import "variables";
@import "mixins";

六、操作符

.container {
  width: 100% / 3;
}