Less从入门到精通——命名空间（附源码、学习视频和笔记）

完整学习视频及资料在这里哦~
链接：https://pan.baidu.com/s/1XHxElnc2N-qwg2f2J30Qyw
提取码：4k8t

命名空间

• 将一些需要的混合组合在一起，可以通过嵌套多层 id 或者 class 来实现。这样类似于进行了一种封装可以供重复调用。

• 我们可以在 Less 混合中为自己封装一些比较日常比较常用的类名，通过命名空间来使用，来使编码更加有效率，如：

• 比如我们在 混合 #bgc 里面定义了 .a .width .height三个类，分别设置了字体颜色与鼠标经过颜色改变，宽度和高度。

• 当需要这其中的某些样式时，我们就可以通过命名空间来找到其中我们需要的具体样式。

• 格式为 大混合 > 实现样式的类或ID 这样的使用方式 我们称为命名空间。
  可以简单理解为通过名字来找到我们需要的空间

#bgc(){
    .a{
        color: black;
        &:hover{
            color: red;
        }
    }
    .width{
        width:100%;
        #bg(){
            background-color: pink;
        }
    }
    .height{
        height: 100%;
    }
}
// 对混合使用命名空间进行调用
a{
    #bgc > .a;         // > 就相当于选择混合中的哪一个，类似于一种查找符
}
div{
    #bgc > .width;
    #bgc > .width > #bg;
    #bgc > .height;
}
// 也就是说 #bgc > .a 是一个命名空间，其他的类似
// 最后CSS输出为
a {
  color: black;
}
a:hover {
  color: red;
}
div {
  width: 100%;
  background-color: pink;
  height: 100%;
}

    划重点啦~：还有一种更简单的写法哦，省略查找符（>） 写法

// 示例: 将上面的 a 改写为：
a{
    #bgc .a;       // 这样的写法就更加类似我们的CSS写法了吧！
}
// 会得到相同的输出