less笔记

目录

一 less基础

 二 less中的混合

三 匹配模式

arguments

 运算

 四 less继承

避免编译

---

一 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); 
}