3

私はこれをLESS Webサイトのドキュメント、ミックスイン部分に従って書きました。これは機能すると思いましたが、構文エラーが発生します。

SyntaxError: properties must be inside selector blocks, they cannot be in the
root. in less/style.less on line 3, column 3:  
2 .bg (@x; @y) {  
3   background-position: unit(@x, px) unit(@y, px);  
4 }

レスは次のとおりです。 

.bg (@x; @y) {
  background-position: unit(@x, px) unit(@y, px);
}
.mydiv (@x:0; @y:-52; @width:300px; @height: 155px) {
  .bg(@x, @y);
  width: @width;
  height: @height;
  opacity: 1;
}

.mydiv()

また、複数のパラメーターのみを使用すると、同じエラーが発生します。

SyntaxError: properties must be inside selector blocks, they cannot be in the  
root. in less/style.less on line 14, column 3:  
13 .mydiv(@width:300px; @height: 155px) {  
14   background-position: 0px -52px;  
15   width: @width;

以下： 

.mydiv (@width:300px; @height: 155px) {
  background-position: 0px -52px;
  width: @width;
  height: @height;
  opacity: 1;
}

.mydiv()

何が問題なのかわからない...助けてください...
引用：Windows 8.1 x64で、grunt-contrib-lessとless 1.4.2を使用しています。

4

2 に答える 2

10

CSS ブロックの範囲外で呼び出し.mydiv()ているため、(仮説的に) 間違った CSS が出力されます。何かのようなもの：

/* some arbitrary css: */
body { font-family: Arial; }
a { text-decoration: underline; }

 /* your mixin (invalid): */
background-position: 0px -52px;
width: @width;
height: @height;
opacity: 1;

次のような CSS ブロック内で mixin 呼び出しをラップする必要があります。

.bg (@x; @y) {
  background-position: unit(@x, px) unit(@y, px);
}
.mydiv (@x:0; @y:-52; @width:300px; @height: 155px) {
  .bg(@x, @y);
  width: @width;
  height: @height;
  opacity: 1;
}

.myClassThatUsesMyDiv
{
   .mydiv()

   /* can be with some other directives: */
   background-color: transparent;
}
于 2013-10-17T10:58:33.623 に答える
4

他の要素の外側で属性を含む mixin を使用すると、誤った CSS が生成されます。発生したエラーは、LESS コンパイラがそれを防止したいためです。

Q: ミックスインを使用するにはどうすればよいですか?

A: mixin 定義とは何か、mixin 呼び出しとは何かを理解していることを確認してください。

これを明確に説明するために、簡単な例を使用します。

これは mixin定義です:

.sample-mixin (@color; @width: 100px) {  
  color: @color;
  display: block;
  width: @width;  
}

このような mixin を使用するには、関数のように呼び出すだけです。

.sample-mixin(#eeffee);    // this line is actual mixin call

Mixin 呼び出しは、mixin コンテンツ全体に対して評価されます(変数が評価されます)。

color: #eeffee;
display: block;
width: 100px;

Q: 他のブロックの外で mixin を呼び出すのが間違っている場合は?

A: ミックスインに少なくとも 1 つの属性が含まれている場合:

.sample-mixin (@color) {
  color: @color; 
}

次に、ブロック外で呼び出します。

 .sample-mixin(#eeffee);

正しくない CSS になります:

color: #eeffee;

しかし、ブロック内で呼び出す：

 p {
   .sample-mixin(#eeffee);
 }

正しい CSS になるので問題ありません。

p {
  color: #eeffee;
}

Q: mixin を他のブロックの外で呼び出す場合は正しいですか?

A: ミックスインにブロックしか含まれていない場合のみ:

.sample-mixin (@color) {
  body { 
   color: @color; 
  }    
}

次に、ブロック外で呼び出します。

 .sample-mixin(#eeffee);

正しい CSS になります。

body {
  color: #eeffee;
}

補足: mixin 内にブロックを配置することは、読者を効果的に混乱させ、CSS 内でより高い結合をもたらす可能性があるため、良い習慣ではありません。

于 2013-10-17T12:19:02.640 に答える