less基础(全)

---

前言

本篇文章就是对less作一基本的总结。其中从它的使用环境，变量，函数，作用域，运算，嵌套规则等这些方面来总结。

---

一、less概述

1.Less是一种CSS的扩展和动态样式表语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。
2.Less是一种开源语言，也是跨浏览器兼容的语言。
3.Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，``增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端

补充：
1.在node.js环境运行：

npm install -g less
>lessc style.less style.css

2.在浏览器环境运行：
注意：css样式文件一定要在引入less.js前先引入。

<link rel="stylesheet/less" type="text/css" href="styles.less" />
//(href里面的css是style.less，rel里面是stylesheet/less)
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>
//（引入less js）

3.样式写在项目下的css文件下：文件名 + less

---

二、新功能（以示例为主）

1.变量、变量数组

1.1变量

//

@color:green;
@size:15px;
.p1{
	background:@color;
	font-size:@size;
}

1.2变量数组(less中的初始下标是1)

@colorArr:#f9606d,#7321ed，#ce58ff,#b042d0;//定义了一组颜色

span{
	color:extract(@colorArr,1) //此处1为下标，这和js中不同的是，less中的初始下标是1
}

2.函数(颜色，数学函数)

2.1颜色函数
颜色函数使定义和操作颜色变得超级简单。主要是控制颜色，更好的配色并保持其组织性。

函数名称	描述
lighten(参数1,参数2)	比如说，lighten(blue,10%),返回一个比蓝色低10%更轻的颜色
darken(参数1，参数2)	返回一个比参数1（颜色）高参数2（百分比）较暗的颜色
saturate()	返回比颜色多饱和度百分比的颜色
desaturate()	与saturate()的相反
fadein()	返回一个比颜色少百分比透明度的颜色
fadeout	与fadeout()相反
fade	返回一个颜色透明度为百分比的颜色
spin	第一个参数都是颜色，但是第二个参数就是有正有负；如果为正，则表明返回色调比颜色大几度的颜；反之，则返回小几度的颜色
mix(颜色1，颜色2)	返回一个混合颜色1和颜色2 的颜色

2.2数学函数
数学函数主要是提供一些处理数字类型的值。

函数	描述
round()	四舍五入
ceil()	上舍入
floor()	下舍入
percentage()	将一个不带单位的数字转换成百分比形式

round(1.78); //返回2
ceil(3.3);//返回4
floor(2.8);//返回2
percentage(0.6);//返回60%

3.less语法之作用域

less中的作用域跟其他编程语言非常相似，首先会从本地查找变量或者混合模块，如果没有找到的话会去找父级作用域中查找，直到找到为止。

4.混合（案例）

1.将.border的样式直接引入.container,直接引入即可

.container{
	width: 100px;
	height: 100px;
	.border;
}
.border{
	border: 1px solid red;
}

2.将.border(参数)引进.container

.container{
	width: 100px;
	height: 100px;
	.border(1px);
}
.border(@borderWidth){
	border: solid black @borderWidth;
}

3.基于第二种，将参数给定默认参数.border(默认参数)传入.container不给参数就按照默认参数，给参数就按照给定参数。

.container{
	width: 100px;
	height: 100px;
	.border();
}
.border(@borderWidth: 10px;){
	border: solid black @borderWidth;
}

5.匹配模式

匹配模式可以理解成js当中if-else、switch语句，假设项目中需要多处用到一些小的图标。

案列：显示三角形的方向问题（上，下，左，右）

//朝上的三角形
.triangle(top,@width: 50px,@color: #ccc){
	border-width: @width;
	border-color: transparent transparent @color transparent;
	border-style: dashed dashed solid dashed;
	
	//如果想要朝下或者朝右，需要改变第一参数（方向），border-color的值。为了减少工作量。使用匹配模式
} 

//使用匹配模式
//@_表示，不管上下左右都带上这个固定的样式
.match(@_,@w:10px,@c:red){
　　width: 0px;
　　height: 0px;
　　overflow: hidden;
　　border-style: solid;
}
.triangle{
　　.match(bottom)
}

6.运算（案例）

一般运算是用在px和color(相对用的少).

@fontSize:15px;
@color:#808080

.container{
	font-size:@fontSize +15;
	color:@color + 10;
}

7.嵌套规则（案例）

.list{
        width: 200px;
        height: auto;
        .li{
	height: 30px;
	line-height: 30px;
         }
         .a{
	font-size: 14px;
	&:hover{
	          color: red;
	}
         }
         .span{
	 font-size: 12px;
         }
}

//其中的&：指向上一层父级选择器
//写的层级数越多，解析的速度也就越慢

---

三.less语法之避免编译（案例）

有时候在写代码的过程中有可能输出一些不正确的css语法或者less 不认识的语法，解决办法就是在值的前面加~，表示不进行编译（滤镜）。

.container{
	width: ~'calc(100%-20)';
}
/编译后
.container {
	width: calc(100%-20);
}

---

总结

由于less是css的扩展，在语法上有很大的相似性，所有在此篇文章中，我只写了一些我认为陌生的知识。如果想更深入的学习。可以参考关于less的两个网站：
网站1：http://lesscss.org/
中文网站： http://lesscss.cn/