Sass 记录

@each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

等同于

.puma-icon {
  background-image: url('/images/puma.png'); }
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); }
.egret-icon {
  background-image: url('/images/egret.png'); }
.salamander-icon {
  background-image: url('/images/salamander.png'); }

变量定义使用$var

定义混合样式@mixin

引用混合样式@include

@mixin function($box-shadow...)  不确定参数

自定义函数@function @return

 使用@mixin 而避免使用 @extend

@mixin 函数中的参数可以通过设置null来解决设置参数默认值问题