2012-03-06 14 views
3

私はSCSSからLess.jsに切り替えようとしていましたが、SCSSで使用していた機能を見つけることができません。Less.jsとSCSSのアンパサンド

#nav { 
    li a { 
    color: maroon; 

    body.admin & {background-color: #eee;} 
    } 
} 

は、ここではそれがbody.adminの文脈で#nav li aは灰色の背景を持つことを定義して言います。

#nav { 
    &>li { 
    ... 
    } 
} 

#nav>li {...}に対応する。

less.jsではこれらはできません。

+3

を、私はあなたが 'ボディを行うことができるとは思いません.admin& 'LESS付きのもの。おそらく悪いことではない。混乱しているからだ。 '>'については、以下を参照してください。http://stackoverflow.com/a/7635074/405015 – thirtydot

+0

これを回答として投稿すると、私はそれを受け入れます。 –

答えて

2

body.admin &はLESSで行うことはできません。おそらく悪いことではない。混乱しているからだ。

>(子セレクタ)は、以下を参照してくださいLess.js - strong nested rules?

を参照してください:http://tinkerbin.com/H3wUpFMj

を( "少ない"、それから "ファイル名を指定して実行" を押すCSSフォーマットを変更)それは同じくらい簡単ですこのように:

.A { 
    > .B { 
     width: 50px; 
    } 
} 
4

はい、&のこの使用法はsupported in LESSです。

あなたがhttp://less2css.orgにあなたの例を入力する場合は、これを見ることができます:

LESS入力:

#nav { 
    li a { 
    color: maroon; 

    body.admin & {background-color: #eee;} 
    } 
} 

CSS出力:

#nav li a { 
    color: maroon; 
} 
body.admin #nav li a { 
    background-color: #eee; 
}