sass特性笔记

1. 变量
2. 嵌套
3. partial
4. import
   @import 'a'可以导入_a.sass,无需后缀，sass可自动识别。 有利于css的模块化，可以拆分成更小的模块，利于维护。
5. mixins

scss:

@mixin transform($property) {
 -webkit-transform: $property;
 -ms-transform: $property;
 transform: $property;
}

.box { @include transform(rotate(30deg)); }

编译的css:

.box {
 -webkit-transform: rotate(30deg);
 -ms-transform: rotate(30deg);
 transform: rotate(30deg);
}

6. Extend/Inheritance 扩展/继承

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

css:

/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}