less 动态样式语言

1.less的介绍

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

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

浏览器本身只能解析css文件，对于less无法解析。
要么对less进行编译，让他在node环境下转换成对应的css文件。
要么引入less后再引用对应的js文件

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

3.安装node环境

less的编译依赖node环境，请先安装node.js
安装完毕后在cmd下输入：node -v
这个命令用来查询node的版本，查询到版本号则表示安装成功

4.安装less编译程序

在cmd环境下运行 npm install -g less

5.手动编译less文件

在要编译的less文件目录下打开cmd窗口，输入以下命令即可执行编译

lessc test.less test.css

即可将此目录下的test.less编译成test.css文件

6.less变量的定义与使用

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

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

编译结果

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

7.引用其他css类

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

8.函数

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

9.嵌套

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

10.伪类

div{
    width:100px;
    height: 100px;
    &:nth-of-type(1){
        background-color: red;
    }
}

11.运算

div{
    width:400px;
    height: 100px;
    >.item{
        /*运算 相当于33.3333%*/
        width:1/3*100%;
    }
}

12.导入

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

@import "library"; // library.less

原文地址：https://www.cnblogs.com/OrochiZ-/p/11567149.html