目录
一 less基础
(1)less中的注释
以//开头的注释,不会被编译到css文件中
以/**/包裹的注释会被编译到css文件中
(2)less中的变量
使用@来申明一一个变量: @pink: pink;
1.作为普通属性值只来使用:直接使用@pink
2.作为选择器和属性名: @{selector的值}的形式
-------------less中-----------
@color:pink;
@m:margin;
@selector:#wrap;
*{
@{m}:0;
}
@{selector}{
background:@color;
}
-----------等价于css中---------
*{
margin:0;
}
#wrap{
background:#ffc0cb;
}
3.作为URL: @{url}
4.变量的延迟加载
---------------------------------less中-----------
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var;//3
@var: 3;
}
one: @var;
}
------------------------------------等价于css中-------
.class{
one:1;
}
.class .brass{
three:3;
}
(3)嵌套规则
&的使用表示平级:
------------less中-----------
#wrap{
.inner{
background:blue;
&:hover{
background:pink;
}
}
------------等价于css中----------
#wrap .inner{
background:blue;
}
#wrap .inner:hover{
background:pink;
}
二 less中的混合
混合就是将一系列属性从一个规则集引入到另一个规则集的方式
(1)普通混合
==============================less中=================================
.juzhong{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background: deeppink;
height: 100px;
width: 100px;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong;
}
.inner2{
.juzhong;
}
=============================相当于CSS中=================================
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
}
#wrap .inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background: deeppink;
height: 100px;
width: 100px;
}
#wrap .inner2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background: deeppink;
height: 100px;
width: 100px;
}
(2)带参数并且有默认值的混合
==============================less中=================================
.juzhong(@w:10px,@h:10px,@c:pink){
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background:@c;
height:@h;
width: @w;
}
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
.inner{
.juzhong(100px,100px,pink);
}
.inner2{
.juzhong();
}
=============================相当于CSS中=================================
#wrap{
position: relative;
width: 300px;
height: 400px;
border: 1px solid;
margin: 0 auto;
}
#wrap .inner{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background: #ffc0cb;
height: 100px;
width: 100px;
}
#wrap .inner2{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin:auto;
background: #ffc0cb;
height: 10px;
width: 10px;
}
扩展:命名参数
....
.inner2{
.juzhong(@c:black);
}
...
三 匹配模式
01.less文件中
//第一个会.triangle自动被调用
.triangle(@_){
width: 0px;
height: 0px;
overflow: hidden;
}
.triangle(L,@w,@c){
border-width: @w;
//border-style:dashed 虚线
border-style:dashed solid dashed dashed;
border-color: transparent @c transparent transparent ;
}
.triangle(R,@w,@c){
border-width: @w;
border-style:dashed dashed dashed solid;
border-color: transparent transparent transparent @c;
}
.triangle(T,@w,@c){
border-width: @w;
border-style:dashed dashed solid dashed ;
border-color: transparent transparent @c transparent ;
}
.triangle(B,@w,@c){
border-width: @w;
border-style:solid dashed dashed dashed ;
border-color: @c transparent transparent transparent ;
}
匹配模式.less文件:
@import "01.less";
#wrap .sjx{
.triangle(R,40px,yellow)
}
在终端执行命令
执行效果
arguments
=================less中========================
.border(@1,@2,@3){
border:@arguments;
}
#wrap .sjx{
.boder(1px,solid,black)
}
===============等价于css中==========================
#wrap .sjx{
border:1px solid #000000;
}
运算
less中可以直接对变量进行+、-、*、/操作等,也可以使用小括号进行更复杂的操作(注意:进行运行操作时只要有一个有单位即可)
.sjx{
width:(100+100px)*10
}
四 less继承
juzhong-extend.less中
.juzhong{
position: absolute ;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong:hover{
background: red! important;
}
extend.less中
*{
margin:0;
padding:0;
}
@import "juzhong-extend.less";
#wrap{
position: relative;
width: 300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
.inner{
//继承
//切记父类不能定义成混合(继承不灵活性能高混合灵活性能低)
&:extend(.juzhong all);
&:nth-child(1){
width: 100px;
height:100px;
background: pink;
}
&:nth-child(2){
width: 50px;
height: 50px;
background: yellow;
}
}
}
编译后的extend.css文件
*{
margin:0;
padding:0;
}
.juzhong,
#wrap.inner {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
.juzhong:hover,
#wrap .inner:hover{
background:red!important
}
#wrap {
position: relative;
width:
300px;
height: 300px;
border: 1px solid;
margin: 0 auto;
#wrap . inner :nth-child(1) {
width: 100px
height: 100px;
background: pink;
}
#wrap . inner:nth-child(2) {
width: 50px;
height: 50px;
background: yvellow;
}
避免编译
===================================less中==================================
*{
margin: 100 *10px;
//~""可以避免less编译
padding: ~"cac1(100px + 100)" ;
}
==================================等价于css中============================
*{
margin:1000px ;
padding:cacl(100px+100);
}
~"不会被编译的内容”
变量在less中属于块级作用域,延迟加载