在什么情况下，01 less的使用更为合适？

本文共计817个文字，预计阅读时间需要4分钟。

使用less安装两个包：`less` 和 `less-loader`。命令如下：

bashcnpm install less less-loader --save-dev

less中的注释以`//`开头，不会被编译到CSS文件中。例如：

less// 注释内容1/* 注释内容2 */

使用`@`来声明变量，如：

less@pink: pink;p { color: @pink; // 颜色值变为变量值 pink}

使用less 安装两个包
1===》cnpm install less less-loader --save-dev

less中的注释
以 //开头的注释 不会被编译到css文件中去
以 /**/3===》
1)使用@来声明一个变量 @pink:pink; 变为变量

<p class="p">123</p>
<style lang="less" scoped>
@colorred: red;
.p{
color: @colorred;
}
</style>
-----------------------------
) css变为变量 将margin变为一个变量
@m: margin;
.p {
@m: 20px;
或者 @{m}: 30px; 推荐
}
--------------------------------
3) 变量可以作为 @{作用的元素}{}
<span>33</span>

@sp: span;
@{sp} {
background: pink;
}
------------------------------------
4）less作为url. @{}
一般我们很少将 属性 和选择器 变为变量

记住 less中的变量都是延迟加载的
在less中的变量都是块级作用域
一个{} 代表一个作用域 哈 这样可以避免变量污染

less中的嵌套规则
第一种嵌套规则
div {
p{

}
}

第二种 &的使用 它代表的是平级
光标放在span 上 出现变色
<div class="box">
<p class="p">123</p>
<span>33</span>
</div>

.box {
span {
margin-top: 20px;
&:hover {
color: red;
}
}
}

必须要使用 &

混和
需求 div 和span 都要 出现了相同的代码 这个时候就可以使用混合了

<style lang="less" scoped>
.xiangtong {
width: 300px;
height: 300px;
background: red;
line-height: 300px;
text-align: center;
display: block;
}

.box {
.p {
.xiangtong;
}
span {
.xiangtong;
}
}
</style>

---------------------
带参数的混合哦
p的宽高是100px, 200px 出现红色
span的宽高是50px, 50px, 出现白色

<template>
<div>
<div class="box">
<p class="p">123</p>
<span>33</span>
</div>
</div>
</template>

<script>
export default {
data() {
return {};
}
};
</script>

<style lang="less" scoped>
.xiangtong(@w,@h,@c) {
width: @w;
height: @h;
background: @c;
line-height: @h;
text-align: center;
display: block;
}

.box {
.p {
.xiangtong(100px, 200px, 200px,red);
}
span {
.xiangtong(50px, 50px, 50px,green);
}
}
</style>
--------
混合并且有默认参数哦
.xiangtong(@w:100px,@h:50px,@c:red) {
width: @w;
height: @h;
background: @c;
line-height: @h;
text-align: center;
display: block;
}

-------------
当形参和实参个数不一致的时候 你就可以指定 你的这个参数是给谁的(命名参数的混合)
.xiangtong(@c:pink)

遇见问题，这是你成长的机会，如果你能够解决，这就是收获。

作者：​​晚来南风晚相识​​​

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。