使用less 安装两个包 1===》cnpm install less less-loader --save-dev less中的注释 以 //开头的注释 不会被编译到css文件中去 以 /**/3===》 1)使用@来声明一个变量 @pink:pink; 【颜色值】变为变量 p cla
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)
遇见问题，这是你成长的机会，如果你能够解决，这就是收获。
作者：晚来南风晚相识
本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接
如果文中有什么错误，欢迎指出。以免更多的人被误导。