sass自定义函数？

Question

在less中可以

.full() {
    width: 100%;
    height: 100%;
}
#body {
    .full();
}

效果等同于

#body {
    width: 100%;
    height: 100%;
}

sass中有类似的写法吗？@function好像只能做值处理？

Answer 1

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

Answer 2

如下：

@function my-function($arg1, $arg2) {
  // function code here
}

Answer 3

这个直接看文档吧，阅读文档是一个好习惯，function 的方式、extend 的方式 等等。

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

Keywords: Sass @mixin @include

@mixin full {
    width: 100%;
    height: 100%;
}

#body {
    @include full;
}