Less知识点
2018-06-30 本文已影响8人
强某某
变量
使用@来声明一个变量,如果把属性名和选择器当作变量，记得加上大括号
<style lang="less" scoped>
@color:blue;
//把属性名当作变量
@yanse:color;
//把选择其当作变量
@select:hello;
.@{select}{
p{
@{yanse}: @color
}
}
</style>
变量的延迟加载
less是遵循块级作用域原则的，会在块级作用域加载完毕之后，才确定最终的变量值
<style lang="less" scoped>
@color:blue;
//把属性名当作变量
@yanse:color;
//把选择其当作变量
@select:hello;
.@{select}{
p{
@size:12px;
font-size: @size;
@{yanse}: @color;
@size:52px;
}
}
</style>
说明：最终字体大小是52px
嵌套规则
嵌套的都是父子级关系，如果想表示同级关系，使用&
<style lang="less" scoped>
.hello{
p{
color:pink;
&:hover{
color: blue;
}
}
}
</style>
说明：这样编译处理结果就是p:hover 如果不加&编辑出来结果是p :hover成了父子级
less的混合（mixIn）
讲一系列属性从一个规则集引入到另一个规则集的方式
普通混合
<body>
<div id='box'>
<p>
ceshi
</p>
</div>
<div id="box2">
</div>
</body>
//此处就是混合
.juzhong{
width: 200px;
height: 200px;
border: 1px solid black;
color:red;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#box{
background-color: aqua;
.juzhong;
p{
text-align: center;
}
}
#box2{
.juzhong;
background-color: yellow;
}
不带输出的混合
<body>
<div id='box'>
<p>
ceshi
</p>
</div>
<div id="box2">
</div>
</body>
//此处就是混合,和上面的唯一区别就在这个()，加上之后，不会
//输出到css文件当中，如果去掉()就会把.juzhong复制到css中
.juzhong(){
width: 200px;
height: 200px;
border: 1px solid black;
color:red;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#box{
background-color: aqua;
.juzhong;
p{
text-align: center;
}
}
#box2{
.juzhong;
background-color: yellow;
}
带参数的混合
<body>
<div id='box'>
<p>
ceshi
</p>
</div>
<div id="box2">
</div>
</body>
.juzhong(@bg,@w,@h){
width: @w;
height: @h;
border: 1px solid black;
color:red;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: @bg;
}
#box{
.juzhong(blue,300px,300px);
p{
text-align: center;
}
}
#box2{
.juzhong(yellow,200px,200px);
}
1.png
带参数并且有默认值的混合
//此处@h就是带有默认值的，可以不传递
.juzhong(@bg,@w,@h:100px){
width: @w;
height: @h;
border: 1px solid black;
color:red;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: @bg;
}
#box{
.juzhong(blue,300px,300px);
p{
text-align: center;
}
}
#box2{
.juzhong(yellow,200px);
}
2.png
命名参数
.juzhong(@bg,@h:100px,@w){
width: @w;
height: @h;
border: 1px solid black;
color:red;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: @bg;
}
#box{
.juzhong(blue,300px,300px);
p{
text-align: center;
}
}
#box2{
.juzhong(yellow,@w:200px);
}
说明：当形参和实参个数不匹配，而且没用默认值的时候，会报错，
此时可以通过跳过有默认值的，直接指定形参赋值.
例如：.juzhong(yellow,@w:200px);
效果同图二
匹配模式
<body>
<div id="box1">
测试1
</div>
<div id="box">
测试
</div>
</body>
style.less:
@import './base.less';
#box{
.base(L,200px,300px,yellow)
}
#box1{
.base(R,400px,500px,blue)
}
base.less:
<!-- 说明：此种第一个参数@_的方法，在匹配下面对应
方法时候，都会被带上，所以可以放入公共的 -->
.base(@_,@w,@h,@c){
width: @w;
height: @h;
background-color: @c;
}
.base(L,@w, @h, @c){
float: left;
}
.base(R,@w, @h, @c){
float: right;
}
arguments变量
<div id="box">
测试
</div>
.border(@1,@2,@3){
border: @arguments;
width:100px;
height: 100px;
background-color: aqua;
}
#box{
.border(3px, solid, red)
}
图三.png
计算
<div id="box">
测试
</div>
<!-- less计算只要有一方带单位即可 -->
#box{
height: (100+100px);
background-color: aqua;
}
继承
混合的.某某其实就是复制一份到对应的地方，不涉及类名等等
<body>
<div id="box">
<ul>
<li>1</li>
<p class="juzhong">1</p>
<li>2</li>
<p>2</p>
</ul>
</div>
</body>
.juzhong{
text-align: center;
background: yellow;
}
#box{
ul{
li{
&:extend(.juzhong);
height: 50px;
background-color: aqua;
&:hover{
background-color: blue;
}
}
}
}
编译出来，就类似：
.juzhong,li{
......
}
所以继承性能高，不是向混合一样到处复制一份，
而且此时的.juzhong是类名，所以可以是#等，此处
和混合要加以区分
图四.png
