Less 简介

简介

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。Less 可以运行在 Node 或浏览器端。

预处理CSS

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。（参考）
参考网站：https://less.bootcss.com/ 中文非官方
官方网站：http://lesscss.org/

编译less文件的三种方式
1、在客户端使用less.js 编译执行这个工作交给浏览器
2、在服务端使用less 需要安装nodejs
3、工具：koala工具

• koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行
  官网地址http://koala-app.com/index-zh.html

vs code 安装一个插件 ：Easy LESS
打开 settings.json

加入以下代码：

{    "less.compile": {        
	"compress": false, // true => remove surplus whitespace 是否删除多余空白字符        
	"sourceMap": false, // true => generate source maps (.css.map files) 是否创建文件目录树，true表示自动生成一个.css.map文件 ${workspaceRoot} \\css ${workspaceRoot} 代表当前项目的根目录，后面路径自行配置。 less和css文件之间的对应关系        
	"out": true, // false => DON'T output .css files (overridable per-file, see below) 是否编译输出文件        
	//"outExt":".wxss",//输出文件的后缀，默认为.css 小程序中也是用less    
	}
}

项目中创建.less为后缀名的文件，保存后会自动创建一个对应的css文件，引入css文件即可<link rel="stylesheet" href="less.css">
LESS 基本的使用
变量
@变量名:值;

@red:#f40;
body{    
	color: @red; 
}

编译为：

body {  
	color: #f40;  
}

混合（Mixins）
()中可以传递参数，也可以给定默认值，优先使用传递过来的参数

@ye:palegoldenrod;
 .center(@type: absolute) {
            position: @type;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
.bg(){    
	background-color: darken(ye,15%);
	}
 .box{
            color: red;
            .bg();
            .center(fixed);
        }

编译为：

.box {  
	color: red;  
	background-color: #e1d76a;  
	position: fixed;  top: 50%;  
	left: 50%;  
	transform: translate(-50%, -50%);
}

嵌套（Nesting）

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

编译为：

#header {  
	color: black;
}
#header .navigation {  
	font-size: 12px;
}
#header .logo {  
	width: 300px;
}

还可以使用此方法将伪选择器 与混合 一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
	  display: block;
	  zoom: 1;

  	&:after {
	    content: " ";
	    display: block;
	    font-size: 0;
	    height: 0;
	    clear: both;
	    visibility: hidden;
	  }
}

运算

// 运算
        @width: 500px;
        @height: 500mm;
	 .container {
            // 单位不互通的情况下，直接将数字相加
            width: @width + 1rem;
            height: @width * 2;
            // 单位互通的时候，可以直接运算
            border-width: @height + 5cm;
        }

函数
less提前写好的一些函数 可以直接拿来使用

	@base: #f04615;
	@width: 0.5;
	.class {
	  width: percentage(@width); // returns `50%`
	  color: saturate(@base, 5%);
	  background-color: spin(lighten(@base, 25%), 8);
	}

利用 percentage 函数将 0.5 转换为 50%，saturate将颜色饱和度增加 5%，以及lighten颜色亮度降低 25% 并且色相值增加 8.