lessネスト規則(nested-rules)

一:概念
ネストルール:HTMLの構造を模倣し、cssコードをより簡潔明瞭にします.
二:実例解析
1.基本的なネスト規則

小例lessファイル

header{
    width: 960px;
    height: 50px;
    h1{
        color: yellow;
        margin: 0 auto;
    }
    .logo{
        width: 100px;
    }
}

コンパイル後のcssファイル

header {
  width: 960px;
  height: 50px;
}
header h1 {
  color: yellow;
  margin: 0 auto;
}
header .logo {
  width: 100px;
}

2.親要素セレクタ&

コンセプト:&現在のセレクタを表すすべての親セレクタ

小例lessファイル

header{
    .logo{
        &:hover{
            background-color: red;
        }
    }
}

コンパイル後のcssファイル

header .logo:hover {
  background-color: red;
}

&:hoverはすべての親要素headerを表します.logo
3.セレクタの順序変更

コンセプト:&シンボルを現在のセレクタの後に置くと、現在のセレクタはすべての親セレクタの前

に挿入されます.

小例lessファイル(三者の違いに注意)

.a{
    .b{
        .c{
            color: #ccc;
        }
    }
}
.a{
    .b{
        .c &{
            color: red;
        }
    }
}
.a{
    .b{
        & .c{
            color: green;
        }
    }
}

コンパイル後のcssファイル

.a .b .c {
  color: #ccc;
}
.c .a .b {
  color: red;
}
.a .b .c {
  color: green;
}

4.組合せ使用可能なすべてのセレクタリストの生成

小例lessファイル

p, a, ul, li{
    & &{
        color: red;
    }
}

コンパイル後のcssファイル

p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
  color: red;
}