Sass中@include调用mixin时带()与不带()的区别是什么？

这两种写法在功能上完全等价，输出的CSS结果一致，核心区别仅在于语法风格：

• 当你的mixin没有必填参数（或者所有参数都提供了默认值）时，Sass允许你省略调用时的括号。
• 带括号的写法@include btn()更明确，能清晰表明这是一个混合宏调用；不带括号的@include btn则更简洁。

结合你给出的示例代码：

//index.scss
@mixin btn($bg-color: red) {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  background: $bg-color;
}
//first type
.btn {
  @include btn();
}

//second type
.btn {
  @include btn;
}

因为btn这个mixin的参数$bg-color已经设置了默认值red，所以两种调用方式都会使用默认值生成完全相同的CSS：

.btn {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  border: 0;
  background: red;
}

需要注意的是，如果mixin存在必填参数（即没有设置默认值的参数），那么必须使用带括号的写法并传入参数，否则会编译报错。比如：

@mixin btn($bg-color) { // 无默认值的必填参数
  background: $bg-color;
}

// 合法调用
.btn {
  @include btn(blue);
}

// 编译报错：缺少必填参数$bg-color
.btn {
  @include btn;
}

内容的提问来源于stack exchange，提问作者leo_256