Question

我的.scss文件中有以下代码：

.navbar {
    min-height: 30px;
    &-nav{
        li{
            a {
                padding-top: 5px;
                padding-bottom: 5px;
            }
        }
    }
}

它产生以下错误：

语法错误：＆＃34后无效的CSS; ＆安培;：＆＃34;预期＆＃34; {＆＃34;，是＆＃34; -nav {＆＃34;

基本上，我希望我的结果选择器是.navbar-nav，任何人都可以让我知道如何在Sass 3.4.22中实现它

Answer 1

删除括号和分号并使用缩进：

.navbar 
  min-height: 30px
  &-nav
    li
      a 
        padding-top: 5px
        padding-bottom: 5px

来自RubyDoc：

Sass有两种语法。新的主要语法（从Sass 3开始）被称为   “SCSS”（用于“Sassy CSS”），是CSS语法的超集。这个   意味着每个有效的CSS样式表也是有效的SCSS。 SCSS   文件使用扩展名.scss。

第二个较旧的语法称为缩进语法（或者只是   “萨斯”）。受到Haml的简洁启发，它适用于那些人   喜欢与CSS相似的简洁性。而不是括号和   分号，它使用行的缩进来指定块。   虽然不再是主要语法，但缩进语法将会   继续得到支持。缩进语法中的文件使用   扩展.sass。

Answer 2

如果您将示例放到http://www.sassmeister.com/，它会按预期工作。他们正在使用v3.4.21。

也许尝试使用插值助手&包裹#{&}符号：

.navbar {
    min-height: 30px;
    #{&}-nav { 
        li{
            a {
                padding-top: 5px;
                padding-bottom: 5px;
            }
        }
    }
}

它应该产生相同的结果。

如何使用＆amp; sass版本3.4.22中的选择器？

2 个答案: