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