在之前的章节我们学习过 Sass 提供的各种各样的，那么如果我们需要自定定义来使用就需要用到指令 @function了。本节我们来学习 Sass 指令的语法和使用，在 Sass 中是必须要掌握的！

指令也叫让你可以容易的处理各种逻辑和定义复杂的操作，而且你可以在任何需要的地方复用，这使得我们可以抽离出来一些常见的公式或者逻辑，我们先来看下它长什么样，如下：

// 定义
@function a() {
  @return "a"
}
// 使用
.p {
  font: a();
}

回忆一下，上面的在之前的章节中也出现过，这就是指令，定义好后我们就可以使用了，下面我们开始详细讲解指令。

指令是通过 @function 来定义，它的写法是 @function name（arguments…）{}，@function 后面跟名，然后是 () ，() 里面是这个接收的参数，可以接收也可以不接收，最后是 {} 中放的是你的逻辑。名将连字符和下划线视为相同，也就是说 a_b 和 a-b 是同。我们举例看下：

@function fun-name() {
  	// 编写逻辑
}

指令的参数和之前我们讲的混合指令的参数很像，如果接收参数那么使用的时候就必须传入这些参数，但是你可以定义认值使参数成为可选的，我们举例来看下：

// 有认值的参数
@function a($arg: ) {
  @return $arg;
}
// 无认值的参数
@function b($arg) {
  @return $arg;
}
.p {
  font: a();
  font: b();
}

上面的为 CSS 如下：

.p {
  font: ;
  font: ;
}

要注意的是，为参数设置的认值，也可以引用前面的参数或者是任何表达式。

和前面章节讲的 @mixin 类似，指令也可以接收任意的参数，同样是将最后参数以 … 结尾，我们来举例看下：

@function fonts($familys) {
  @return  $familys;
}
.p {
  font: fonts("one", "two", "three")
}

上面这段为 CSS 如下：

.p {
  font: "one", "two", "three";
}

同样的的参数也可以接收任意的参数列表，就像之前在混合指令章节讲的一样，可以用过 .keywords() 来和使用这些参数，不过这个我们一般不是很常用。

在前面的中，可以看到很多次我们在指令中使用了 @return。@return 指令表示作为结果的值，说的简单点就是这个的返回值，这和在 javascript 的中使用 return 很类似。

在 Sass 中 @return 指令只能在 @function 中使用，并且每个 @function 都必须以 @return 结尾！ 在 @function 的逻辑中，如遇到 @return 会立即结束并返回其结果，这在一些 @if 判断的情况下很有用。我们举例看下：

@function a($str: "a") {
  @if $str == "a" {
    @return px;
  } @else if $str == "b" {
    @return px;
  } @else if $str == "c" {
    @return px;
  } @else {
    @return px;
  }
}

p {
  padding: a();
  width: a("f");
  height: a("c");
  margin: a("b");
}

从上面的中我们可以可看到，在 a 中，我们根据不同的参数返回不同的结果，然后在 p 的样式中通过传入不同的参数来不同的结果。上面这段会转换为如下的 CSS ：

p {
  padding: px;
  width: px;
  height: px;
  margin: px;
}

在实际的项目中使用指令是必不可少的，我们会定义很多来帮助我们逻辑问题，一般我们会独立抽出来 function.scss 来管理整个项目中的指令，一般这些都是根据你的项目特性以及样式需要封装出来的。

由于一般是和你的业务强相关的，一般就是为自己的项目定义一些工具和，这里我就不贴出示例了。在实际的应用中，这个指令就是需要你“应变”，按需封装和使用！

本节我们讲了 Sass 指令 @function ，还有指令的和参数。我们可以使用来编写各种各样我们自己的。指令和前面的混合指令很类似，我们通过下图来回一下指令的：

除此之外 Sass 提供了大量的内置，这些我们在前面的章节 Sass 中都做了讲解，你可以借用这些再配合你自己定义的指令，来实现各种复杂的逻辑和强大的。