less基础

less ---- css预处理器

less 是一种 动态的 样式语言，属于 css 预处理器，扩展了 css 语言
增加了变量、Minix 、函数 等特性， 使CSS 更易于维护和扩展
less 既可以在客户端上运行，也可以借助 node.js 在服务端运行

less ： 嵌套结构

1.less 注释

// 这是见不得人的注释
/* 这是想 见人的注释*/

2.less中的变量

使用 @ 来申明一个变量 ： @pink

1. 作为普通属性值来使用： @pink
2. 作为选择器和属性名： #@{selector的值} 的形式

@selector: #wrap;
@m:margin;
body{
	@{m}:0 auto;
}
@(selector){
	background: #fff;
}

3. 作为URL ：@{url}
4. 变量的延迟加载

//less 存在 块级作用域 和延迟加载
// less 取值 会在 块级作用域 全部加载完全后，才会进行取值
@var: 0;
.class {
	@var: 1;
	.brass {
		@var: 2;
		three: @var; // 3
		@var: 3;
	}
	one: @var; // 1 
 }

3.less中的嵌套规则

1.基本嵌套规则
2. & 的使用
同 sass 中的 & 作用一样

4.less 中的混合

混合就是将一系列属性从一个规则及引入到另一个规则集的方式

4.1.普通混合

// html 代码
<div class="inner1"></div>
<div class="inner2"></div>

// less 代码部分
// 这种写法， .less 中的 .juzhong 样式会被自动编译到 .inner1 .inner2 中， .juzhong 不会显示在 .css 文件中
.juzhong{
    color: aqua;
    margin: 0 auto;
}
.inner1{
    background-size: 100%;
    .juzhong;
}
.inner2{
    background: aquamarine;
    .juzhong;
}

4.2.不带输出的混合

4.3.带参数的混合

// html 代码
<div class="inner1"></div>
<div class="inner2"></div>

// less 代码部分
// 这种写法， .less 中的 .juzhong 样式会被自动编译到 .inner1 .inner2 中， .juzhong 不会显示在 .css 文件中
.juzhong(@m){
    color: @m;
    margin: 0 auto;
}
.inner1{
    background-size: 100%;
    .juzhong(#fff);
}
.inner2{
    background: aquamarine;
    .juzhong(#000);
}

4.4.带参数且有默认值的混合

// html 代码
<div class="inner1"></div>
<div class="inner2"></div>

// less 代码部分
// 这种写法， .less 中的 .juzhong 样式会被自动编译到 .inner1 .inner2 中， .juzhong 不会显示在 .css 文件中
.juzhong(@m:#666){
    color: @m;
    margin: 0 auto;
}
.inner1{
    background-size: 100%;
    .juzhong(#fff);
}
.inner2{
    background: aquamarine;
    .juzhong(#000);
}

4.5.带多个参数的混合

// html 代码
<div class="inner1"></div>
<div class="inner2"></div>

// less 代码部分
// 这种写法， .less 中的 .juzhong 样式会被自动编译到 .inner1 .inner2 中， .juzhong 不会显示在 .css 文件中
.juzhong(@m:#666,@v:10px){
    color: @m;
    margin: 0 auto;
    padding: @v;
}
.inner1{
    background-size: 100%;
    .juzhong(#fff,100px);
}
.inner2{
    background: aquamarine;
    .juzhong(#000,100px);
}

4.6.命名参数

// html 代码
<div class="inner1"></div>
<div class="inner2"></div>

// less 代码部分
// 当形参和实参个数不匹配的时候，可以指定参数进行 传递
.juzhong(@m:#666,@color:pink){
    color: @m;
    margin: 0 auto;
    background-color: @color
}
.inner1{
    background-size: 100%;
    .juzhong(#fff);
}
.inner2{
    background: aquamarine;
    .juzhong(@color:#000);
}

4.7.匹配模式

// html 代码
<div class="inner1"></div>
<div class="inner2"></div>

// less 代码部分
// 根据 匹配 的字选定对应的代码
.juzhong(L,@m:#666,@color:pink){
    color: @m;
    margin: 0 auto;
    background-color: @color
}
.juzhong(R,@m:#666,@color:pink){
    color: @m;
    margin: 0 auto;
    background-color: @color
}
.inner1{
    background-size: 100%;
    .juzhong(L,#000,#999);
}
.inner2{
    background: aquamarine;
    .juzhong(R,@color:#000);
}

4.8.arguments 变量

.border(@1,@2,@3){
	border: @arguments;
}
#wrap .sjx{
 .border(1px,solid,black)
}

5.less 运算

在 less 中 可以 进行 加减乘除 运算

6.less 继承

特点：性能比混合高；灵活度比混合低

例子如下：
左 .less ； 右 .css

7. less 避免编译