Less和Sass中的&

&能实现类似BEM这样的命名规则

.button {
  &-ok {
    background-image: url("ok.png");
  }
  &-cancel {
    background-image: url("cancel.png");
  }
 
  &-custom {
    background-image: url("custom.png");
  }
  编译为
.button-ok {
  background-image: url("ok.png");
}
.button-cancel {
  background-image: url("cancel.png");
}
.button-custom {
  background-image: url("custom.png");

Less和Sass中的&都代表所有父级元素，而不是最近的祖先元素

.grand {
  .parent {
    & > & {
      color: red;
    }
}
编译为
.grand .parent > .grand .parent {
  color: red;
}

less中类名如果用&-a这种形式写的话，生成css的嵌套关系是按照下列的关系寻找的 ： &-a这种写法从最近的父级开始，
1.如果父级也是&-a这种写法 ，那么会继续往上跳，直到找到一个非&-a写法的类名，跳出该非&-a写法的类名为止，然后以该类名的父级为父作用域,生成css嵌套关系，即使遇到的这个非&-a写法的类名的父级又是&-a这种写法，那么也不会继续跳出。&-a跳出父级.parent之后，其下的子级也会跟随&-a跳出该父级元素.parent，即子级元素生成的嵌套关系中是不存在这个父级.parent。&-a写法编译后生成的是具有嵌套关系的类名 ， 生成的类名命名规则是，&指的是最近的那个编译后的(即加有[name]和[local])父级元素(不管这个父元素是不是&-a写法)而不是所有祖先元素，这点与&单独使用时意义是不同的。要想不使子级中的&-a写法不跳出父级，需要这样写:&>&-a或者& &-a，需要前边加上限定&。
2.如果在&-a这种层层嵌套关系中间出现.x这种非&-a写法的类名时，那么.x下面的采用&-a写法的子级生成的类名命名就是以x开始的类似.demo1_-x-b-b，而不是demo1_box1-a-x-b-b跟.x的父级box1、box没有关系，但是生成的嵌套关系跟父级还是

.box{
    .box1{
        color: yellowGreen;
    &-a{
        @{a}:yellow;
        width: 500px;
        .x{
			&-b-b{
			}
	}
        }
        }
        }
        编译
     .demo1_box     .demo1_box1-a {
  color: yellow;
  width: 500px;
  height: 500px;
  border: 1px red solid;
}
&-a生成的是具有嵌套关系的类名
正是因为&-a生成的嵌套关系，所以下面的&>&-a中的&-a生成的也是嵌套关系，所以编译后会让人感到奇怪,所以最好不要在&-a下继续用&>&-b这种写法,可以&>div或者>div，这样就不会出现奇怪的嵌套。在&-a下继续用&>&-b这种写法,必须显式的加&符号，如果只是>&-a，编译出来的css是没有的父级，如果是>div,那么就不需要显示的写&>div。所以最好是在最外层只加一个.box这样的非&-a写法的类名，不要嵌套多层非&-a这种写的类名，.box{ .box1{} },因为&-a这种写法只会跳出第一个非&-a写法的类名，不会再继续往上跳。
&>&-a这种写法可以把&和&-a分开单独分析， 就是父级&生成的嵌套关系  通过>选择器链接  &-a单独使用时生成的嵌套关系。&>&-a会使&-a不跳出父级, 生成的css会使其通过>嵌套在父级内部，但是不影响其父级&按照正常的规则跳出自己的父级，所以&>&-a这种写法生成的css嵌套关系不包含父级&跳出的父级。
.box{
    .box1{
        color: yellowGreen;
    &-a{
        &>&-d{
            color: blue;
        }
       }
      }
    }
    编译为
    .demo1_box    .demo1_box1-a > .demo1_box    .demo1_box1-a-d {
  color: blue;
}
上面是针对编译后的css的解释。
cssModules生成的style对象中，style对象中生成的都是独立的没有嵌套关系的属性名，属性名的命名规则不存在跳出嵌套，且都是每个属性(&-a写法)的命名都是其所有父级连接起来再加上其自身的类名所组成的属性名，如果是非&-a写法的，即是.x,.test这种写法的，则不需要加其父级名字，直接就是其本身的名字。
style = 
{
box: "demo1_box"
box1: "demo1_box1"
box1-a: "demo1_box1-a"
box1-a-b: "demo1_box1-a-b"
box1-a-d: "demo1_box1-a-d"
box-a-c: "demo1_box-a-c"
son: "demo1_son"
son2: "demo1_son2"
test: "demo1_test"
test11: "demo1_test11"
x: "demo1_x"
x-b-b: "demo1_x-b-b"
}

以上的嵌套关系及生成的类名方式是less的用法，不是cssModules的用法，cssModules只提供生成的style对象，在html通过style.的写法方便写入类名。

Sass中也有上述同样的用法

@import " xx.css或者x.less",通过@import引入的文件，在cssModules编译的时候按照webpack中设置的 localIdentName:’[name]_[local]'生成的类名，其中[name]就变成了@import所在的文件的名字，不再是xx.css中的xx了，但是如果在js中通过import style from 'xx.css’的话是不会改变[name]的。