less的使用方法

什么是Less：
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。

Less的特点：
1， 是css的一种预编译语言，扩展了css的语法
2，less使得css具有动态语言特性，可以使用变量，函数，逻辑
3，less语法中使用注释，不会将注释编译到css文件中（建议可以多使用注释）

Css三大预编译语言：
Sass:
是市面上最成熟的预编译语言，
适用范围比less更小，
语法相对less更加复杂

Less:
适用范围更广，语法理解更加简单

stylus:
在node环境下进行预编译，范围更小

Less的安装和使用：
1，安装：
cdn
npm
外部脚本文件
2，引入
先引入外部less文件（以.less为文件后缀名）

     <link rel="stylesheet/less" href="./style.less">

再引入脚本文件

注意 ：html应该再服务器上运行

Less的功能：
1》变量
允许定义变量，然后在规则中直接应用

        @name:100px;
        @width:100px;

        div{
            width:@width;
            height:@width;
        }

2》混合-mixin
混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。混合的使用类似于方法的调用

3》嵌套
Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。可以在嵌套中使用伪类选择器和伪元素选择器，& 表示当前选择器的父级。

4》运算
计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 5%; @filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
@base: 2cm * 3mm; // 结果是 6cm
@color: #224488 / 2; //结果是 #112244

5》函数
color(“#ccc”):将字符串类型的颜色值进行应用
convert(10cm,mm);:将第一个参数转换为第二个参数单位
ceil();
floor()
round()
abs
sin
min
max
percentage();
pi():

6》命名空间&访问符
将样式进行封装，并不产生冲突
添加()可以不解析封装样式
7》映射
将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用
8》作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

        var a=10;
        function say(){
           // var a=30;
            console.log(a);
        }

        say(20);

9》注释
//
/**/
10》导入
@import ‘’

将所有功能汇合写一个测试例子，html代码如下：

less代码如下：