Less语言特性 - 命名空间和访问器

作者: 张中华 | 来源:发表于2021-06-19 07:24 被阅读0次

Less语言特性 - 命名空间和访问器
2017-3-22 less
JVM-2
Less 学习笔记
14. LESS和SASS
Less即学即用
2021-04-25周日
less用法总结
less-命名空间
基于docker-compose 安装harbor

它用于将mixins分组在通用名称下。使用命名空间可以避免名称冲突，并从外部封装mixin组。
less是css的预编译语言，类似于用函数编程的方式去定义css。所以自然会涉及到调用的问题，我们在写.net/java时，需要调用外部对象方法时，其实在头部就是先引用了该对象方法的命名空间，在这个地方，命名空间的主要目的就是划分模块，自然每个模块是互不干扰的，避免了不同命名空间下的重名冲突等。也正因如此，增加了代码的可读性。

例如下面的例子，先做了定义, 最外层是headerClass, 内部有两个leftClass和rightClass：

.headerClass {
    .leftClass {
        float: left;
    }
    .rightClass {
        float: right;
    }
}

定义好了层次结构之后便可以直接调用了，例如：

.container .left {
    .headerClass > .leftClass;
}

如此一来，便有了一定的复用功能，且因为有了命名空间不会造成代码使用的混乱。

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet/less" type="text/css" href="./index.less" />
    <script src="../../less.min.js" ></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="left">左侧内容</div>
            <div class="right">右侧内容</div>
        </div>
    </div>
</body>
</html>

index.less

.headerClass {
    .leftClass {
        float: left;
    }
    .rightClass {
        float: right;
    }
}

.container .left {
    .headerClass > .leftClass;
}

.container .right {
    .headerClass > .rightClass;
}