less 动态样式语言

1.less的介绍

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
官方文档

2.less需要编译才能被浏览器解析

• 浏览器本身只能解析css文件，对于less无法解析，需呀解析后留浏览器才能解析
• 在线解析：引入专门的js插件，对当前页面的less文件进行实时编译（生成css代码后通过插入style标签进行引入）

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="https://cdn.bootcss.com/less.js/3.10.3/less.js"></script>

• 打包编译：利用node.js对less进行解析，输出对应的css文件
  (1)确保已安装node.js
  (2)在cmd环境下运行 npm install -g less
  (3)执行编译(将此目录下的test.less编译成test.css文件)

lessc test.less test.css

3.使用场景

• 嵌套语法，让css结构清晰可见，且节省代码数量
• 支持变量，方便系统性的调整样式(主题色，文字色，边框色)
• 支持运算，进行变量运算
• 支持混合，复用css代码
• 支持引入，方便代码模块化
• 支持函数，根据传入的参数输出对应的css代码

4.基本语法

• 嵌套

.box{
    width:100px;
    height: 100px;
    /*只针对子级div有效*/
    > div{
        display: float;
    }
    /*针对后代所有p标签都有效*/
    p{
        text-align:center;
    }
}

• 伪类和兄弟元素

div{
    width:100px;
    height: 100px;
    // 伪类
    &:nth-of-type(1){
        background-color: red;
    }
    // 兄弟元素(相邻)
    & + box2{
        width:100px;
        height: 100px;
        background-color: blue;
    }
}

• 变量

/*定义变量*/
@gbColor:red;

.box{
    width: 200px;
    height: 100px;
    /*使用变量*/
    background-color: @gbColor;
}

编译结果

.box {
  width: 200px;
  height: 100px;
  background-color: red;
}

• 运算：一般用于变量加减(乘除没有意义)

@conversion-1: 50px;
@conversion-2: 100px;

.box {
  //150px
  width: @conversion-1 + @conversion-2;
}

• 混合：引入其他css类中的属性

.addBorder{
    border:1px solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用其他css类*/
    .addBorder();
}

• 函数：相当于引用css类和变量的结合体

/*设置参数，且有默认的值*/
.addBorder(@size:1px){
    border:@size solid red;
}
.box{
    width:100px;
    height: 100px;
    /*引用并传递参数*/
    .addBorder(10px);
}

• 导入：你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import "library"; // library.less

5.总结

• 简单页面建议直接使用css
• 将项目需要用到的变量进行梳理，并封装到base.less中，作为基础文件被其他样式文件引用
• 使用import将base.less导入到其他less文件中，以便使用其定义的变量