SASS错误：在“伪类或伪元素预期之后出现无效的CSS”。

Question

今天我正在尝试一些新的东西..对于我来说，SASS是全新的。请问有人能告诉我是什么导致了这个错误吗？

/*
Error: Invalid CSS after "    margin:": expected pseudoclass or pseudoelement, was "0px"
        on line 5 of /Users/kishorechandra/S-ERP/sass/styles.scss

1: @import "compass";
2: @import "partials/variables";
3: 
4: .ui.menu
5:     margin:0px
6:     background: rgba(255, 255, 255, 0)
7:     font-family: 'Roboto Slab', serif
8: 
9: .ui.icon.menu .active.item
10:     color: #FFB300

Backtrace:
/Users/kishorechandra/S-ERP/sass/styles.scss:5

- Kishore Chandra

Answer 1

在属性后使用空格：，这样编译器就不会再混淆了。所以将 margin:0px 替换为 margin: 0px。学习Sass要开心哦。

- Dinca Adrian

---

真是救命稻草，我都快疯了哈哈！ - Capagris

Answer 2

您使用的是哪种SASS语法，是没有花括号的Sass还是有花括号、更像CSS的SCSS？

编译器将“margin:”解释为元素（<margin></margin>），因为冒号后面没有空格，因此尝试将其处理为状态（如:hover、:active）或伪元素（::after、::before）。

要么切换到SCSS语法，要么在冒号后添加一个空格。

我更喜欢SCSS语法，因为大多数人都使用它，而且比经典的Sass更少出错。

- max

---

如果您正在使用Angular CLI，您可以在创建项目时设置所需的扩展名，或稍后在angular.json中进行修改。https://scotch.io/tutorials/using-sass-with-the-angular-cli - 看起来我选择了sass，但实际上我想要的是scss :-) - Simon_Weaver

Answer 3

在处理React项目时遇到了同样的问题。通过将SASS文件的文件名从file_name.sass修正为file_name.scss来解决了这个问题。

因此，请确保SASS文件的扩展名为.scss。

- shubhamr238