Less的简单使用（二）——Parent Selectors和Merge

Less的简单使用（二）——Parent Selectors和Merge

Parent Selector

使用&运算符来引用父选择器。嵌套规则的父选择器由&运算符表示，并在将修改类或伪类应用于现有选择器时使用。

一、Parent Selector正常用法

.less文件中的代码：

a {
    color: lightblue;
    &:hover {
        color: lightcoral;
    }
    &:visited {
        color: lightseagreen;
    }
    &:focus {
        color: lime;
    }
}

.css文件中对应的css代码：

a {
  color: lightblue;
}
a:hover {
  color: lightcoral;
}
a:visited {
  color: lightseagreen;
}
a:focus {
  color: lime;
}

二、通过Parent Selector产生重复的类名

.less文件中的代码：

.button {
    &-ok {
        background-image: url("ok.png");
    }
    &-delete {
        background-image: url("delete.png");
    }
    &a