使用Scout-app编译SASS转CSS时出现语法错误求助

嘿，这个问题其实一眼就能找到根源啦！从错误提示里就能明确看出——你在定义@mixin h1-text的时候多写了一个左大括号{，直接导致CSS解析器卡壳报错了。

错误原因拆解 #

错误提示里已经把问题点得明明白白：

Error: Invalid CSS after "@mixin h1-text {": expected "}", was "{"↵ on line 2 of ../../../Documents/bootstrap_practice/SASS/mixins.sass↵>> @mixin h1-text { {↵ ----------------^

你第2行的代码写成了：

@mixin h1-text { {

这相当于在mixin的定义开头平白多嵌套了一个大括号，解析器完全搞不懂你要干嘛，自然就抛出错误了。

修正方案 #

把多余的那个左大括号删掉，让mixin回到正确的定义格式就行：

如果你习惯用SCSS风格（带大括号）的语法，修正后代码应该是：

//TEXT MIXINS
@mixin h1-text {
  color: #333;
  // 这里补充你的其他样式属性
}

要是你偏好Sass的缩进式语法（不需要大括号），可以写成：

//TEXT MIXINS
@mixin h1-text
  color: #333
  // 这里补充你的其他样式属性

验证步骤 #

1. 打开你的mixins.sass文件，定位到第2行
2. 删除那个多余的{
3. 保存文件后，重新用Scout-app编译

这样编译应该就能正常运行啦！

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