每日美图

介绍

有一天一定可以陪着爸妈一起去图中的美景，在这里说一句，谢谢爸妈对我的养育之恩，一次次的原谅包容我的错误，我一定不会让你们失望的，为了美好的未来奋斗，因为这是我值得的Yeah。
还是回到正题吧，上篇Sass基本指令我们看了一些sass基于css指令扩展的指令，本文我们只要来看sass独有的一些指令以及用法，我会尽量以最精简的文字描述。

函数指令function

用于声明函数的指令，详情可以查看Sass函数一篇中的内容，这里就不在赘述了，希望各位读者见谅。

流程控制指令

在任何计算机语言中都会有流程控制，sass中也是借由指令实现这一功能，sass中的流程指令有
@if、@else、@else if、@while、@for、@each
这里的用法@for与@each需要看一下

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译后

.item-1 {
  width: 2em;
}

.item-2 {
  width: 4em;
}

.item-3 {
  width: 6em;
}

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

---

@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'); }

开发记录指令

@debug @warn @error

样式复用指令@extend与@mixin @include

首先我们需要了解一些概念术语

.cal{
 //...
}
a:hover {
  text-decoration: underline;
}
#fake-links .link {
  @extend a;
}

这段代码中a:hover .cal称为选择器,#fake-links .link称为选择器列
@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式，延伸是什么什么概念呢，具体看一下下面的代码

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}

.error .intrusion, .seriousError .intrusion {
  background-image: url("/image/hacked.png");
}

.seriousError {
  border-width: 3px;
}

我们可以发现@extend的延伸其实就是在使用error的地方也使用seriousError。
再来看一段代码

@mixin large-text {
  font: {
    family: Arial;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  margin-top: 10px;
}

.page-title {
  font-family: Arial;
  color: #ff0000;
  margin-top: 10px; }

我们发现使用了include就是讲mixin的样式直接引用进来：
@mixin还可以这样使用

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}

这里的@content类似于占位指令的作用
上面描述了@extend与@mixin的主要区别：

• @mixin是支持参数的，@extend是不支持参数的；
• 为便于书写，@mixin 可以用 = 表示，而 @include 可以用 + 表示
  @extend
• 同一个选择器可以延伸给多个选择器，它所包含的属性将继承给所有被延伸的选择器：
• 当一个选择器延伸给第二个后，可以继续将第二个选择器延伸给第三个；
• 暂时不可以将选择器列 (Selector Sequences)，比如 .foo .bar 或 .foo + .bar，延伸给其他元素
• 比如选择器列中的某个元素需要延伸给另一个选择器列；