css - Sass 编译器问题与符号和更新

Question

我正在尝试设置链接样式并遵循 BEM 原则，但我从 sass 编译器中收到错误消息。这是 html

<a href="#" class="sg-link sg-link-icon">Link with icon</a>

这是 sass 的东西:

.sg-link {
    color: #111;
    text-decoration: none;

    &-icon {

        &:before {
            margin-right: 10px;
        }
    }

    &:hover{
        color: $maggie;
    }
}

现在，当 sass watch 编译时，我在终端中收到此错误:

error source/scss/atoms/_02-links.scss (Line 7: Invalid CSS after "    &": expected "{", was "-icon {"

"-icon" may only be used at the beginning of a compound selector.)

我以前使用过这种技术并且一直有效，所以我认为可能与 sass 版本有关。我正在使用 Sass 3.2.13 (Media Mark)。所以我检查了 sass 网站，最新版本应该是 Sass 3.4.13 (Selective Steve) 但是当我尝试使用 gem update sass 进行更新时，它没有提示要更新。也尝试过 sudo 但没有运气。想法？

编辑:我刚刚在 Sassmeister 上检查了相同的代码，它工作正常

提前致谢

Answer 1

您对 Sass 版本的看法是正确的。使用 Sassmeister ，您可以看到您的代码片段在 Sass v3.4.x 下编译，但在 3.2.x 上未编译(您可以在控制面板中的 cog 图标菜单下配置 Sass 版本)。

至于为什么在您的环境中更新 Sass 时遇到问题可能超出了这个问题的范围，但可能是您系统的 Ruby/gem 版本已过时。您可能会考虑像 rbenv 这样的 Ruby 版本管理工具。或 chruby以便更好地控制安装的 gem 版本。我怀疑安装 rbenv(例如)，使用它来安装最新版本的 Ruby，然后使用 gem 从那里安装 Sass 会解决您的问题。

(免责声明:我对 Ruby 不是很熟悉，但我发现像上面描述的那样的设置很适合我。)