Vue学习笔记—less

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

Less 可以运行在 Node 或浏览器端。

一、Less用法：

1.安装Less

cnpm/npm install -g less               //这里可以简写为cnpm/npm i -g less

2.检测Less安装是否成功

Lessc -v/--version

3.Less的使用：

(1)在node环境中使用Less

lessc styles.less styles.css   //通过lessc将less代码转为可识别的css代码

(2)在浏览器环境中使用Less

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

当引入.less文件后，要注意rel属性值的后面需要加上“/less”，并且需要引入less.min.js文件，用来解析引入的less文件。

还有一种方法很高效地将less文件解析出对应的css文件：

安装插件Easy LESS，写完less文件保存后直接会解析出一个对应的css文件

二、Less具有的功能：
1.变量（Variables）

Less中，可以使用变量的形式来定义，在规则中直接应用，便于代码的修改。

定义方式为：@k:v;   

使用方式为：@k;

例如：

（1）Less中变量的定义方式：

@color1: teal;

@fontSize: 24px;

（2）Less中的变量的使用方式：

body{

    color: @color1;

    font-size: @fontSize;

}

可编译为（即以css样式显示）：

body {

  color: teal;

  font-size: 24px;

}