みんなでless 3を勉強します:ネーミングスペース

これは実は「ネスト規則」のアップグレード版です.
まず公式サイトの例を見てみましょう.

//LESS

// , button 

#bundle {

  .button () {

    display: block;

    border: 1px solid black;

    background-color: grey;

    &:hover { background-color: white }

  }

}

// ， XXX > YYY ，  -〉 ， 

#header a {

  color: orange;

  #bundle > .button;

}



/*   CSS */

#header a {

color: orange;

display: block;

border: 1px solid black;

background-color: grey;

}

#header a:hover {

background-color: #ffffff;

} 

上のネーミングスペース定義は、IDセレクタのみが可能だとは思わないでください.任意の合法的なセレクタでもいいです.

//LESS

// 

.bundle {

  .button () {

    display: block;

    border: 1px solid black;

    background-color: grey;

    &:hover { background-color: white }

  }

}

#header a {

  color: orange;

  .bundle > .button;

}



/*   CSS */

#header a {

color: orange;

display: block;

border: 1px solid black;

background-color: grey;

}

#header a:hover {

background-color: #ffffff;

} 

これらのネーミングスペース(他のモジュールと呼ばれる)には、メソッドのみを含めることを強くお勧めします.

//LESS

// ， 

#bundle {

  .button () {

    display: block;

    border: 1px solid black;

    background-color: grey;

    &:hover { background-color: white }

  }

  .red{ color: red; }

}

// ， XXX > YYY ，  -〉 ， 

#header a {

  color: orange;

  #bundle > .button;

}

/*   CSS */



#bundle .red {

  color: red;

}

#header a {

  color: orange;

  display: block;

  border: 1px solid black;

  background-color: grey;

}

#header a:hover {

  background-color: #ffffff;

}

具体的には自分でこのサイトまで游ぶことができます!