less学习（一）：父选择`&`

父选择器&

1.引用父选择器&

a { 
    color: blue; 
    &:hover { 
        color: green; 
    } 
}

转义:

a {
    color: blue;
}
a:hover {
    color: green;
}

2.多个父选择器&

.link { 
    & + & { 
        color: red; 
    } 
    & & { 
        color: green; 
    } 
    && { 
        color: blue; 
    } 
    &, &ish { 
        color: cyan; 
    } 
}

转义后：

.link + .link {
    color: red;
}
.link .link {
    color: green;
}
.link.link {
    color: blue;
}
.link, .linkish {
    color: cyan;
}

3.更改选择器顺序

.header {
    .menu {
        border-radius: 5px;
        .no-borderradius & {
            background-image: url('images/button-background.png');
        }
    }
}

转义后：

.header .menu { 
    border-radius: 5px; 
} 
.no-borderradius .header .menu { 
    background-image: url('images/button-background.png'); 
}

4.组合（在逗号分隔列表中生成选择器的每个可能排列）

p, a, ul, li {
    border-top: 2px dotted #366;
    & + & {
        border-top: 0;
    }
}

转义后:

p, a, ul, li { 
    border-top: 2px dotted #366; 
} 
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 { 
    border-top: 0;
}

5. Extend([v1.4.0])

nav ul { 
    &:extend(.inline); 
    background: blue; 
} 
.inline { 
    color: red; 
}

转义：

nav ul { 
    background: blue; 
} 
.inline, nav ul { 
    color: red; 
}

$prop语法（new）(v3.0.0+)

.widget {
    color:#fff;
    background-color: $color;
}

转义：

.widget {
    color:#fff;
    background-color: #fff;
}