2016-07-07 55 views
0

我有以下我.scss文件的代碼:如何在Sass 3.4.22版本中使用&選擇器?

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

它產生以下錯誤:

語法錯誤:後「&:」無效的CSS預期的「{」,是「 -nav {」

基本上,我想我得到的選擇是.navbar-NAV,任何人都可以讓我知道如何在薩斯3.4.22實現這個

回答

0

刪除括號和分號,並使用indentatio N:

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

從RubyDoc:

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as "SCSS" (for "Sassy CSS"), and is a superset of CSS's syntax. This means that every valid CSS stylesheet is valid SCSS as well. SCSS files use the extension .scss.

The second, older syntax is known as the indented syntax (or just "Sass"). Inspired by Haml's terseness, it's intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.

0

如果你把你的例子來http://www.sassmeister.com/它按預期工作。他們正在使用v3.4.21

也許嘗試用插值助手#{&}包裹&符號:

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

應該產生相同的結果。