2016-07-07 1 views
0

I持って私の.scssファイル内のコードの一部、以下:Sassバージョン3.4.22で&selectorを使用するには?

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

それは次のエラーを生成している:

構文エラー: "&:" の後に無効なCSS "{"、期待されていました " -nav {」

は基本的に、私は誰も私が

答えて

0

サス3.4.22でこれを実装するブラケットとセミコロンを削除し、indentatio使用方法を知らせることができ、私の結果セレクタが.navbar-NAVになりたいですN:RubyDocから

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

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; 
      } 
     } 
    } 
} 

それは同じ結果を生成する必要があります。

関連する問題