开发者学堂课程【移动 Web 前端开发：less-变量】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/594/detail/8484
less-变量
目录：
一、语法
二、变量
一、语法
Less 的语法有：
变量 variables
Mixin 混入
嵌套
Import
函数(内置函数运算)
二、变量
less 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。
定义一个变量：
新建一个名为 variables 的 less 文件。自动生成 variables.css 文件。
同时打开 variables.less 和 variables.css 文件，在 variables.less 文件里编写的程序会编译到 variables.css 的文件里。
编译一下，并排显示两个对话框。
在 variables.less 里面编辑：
@charset "utf-8" ;
/*1.这样的注释是会编译到 css 当中的 css 也支持*/
//这样的注释没有编译到 css 文件
可以看见/*。。。*/里的注释内容能在 variables.css 里编译。但//...注释内容就不能编译到 variables.css 里，这样的注释不会增加 CSS 的体积。@charset "utf-8" ;的作用是确保中文注释编译后不会乱码。
继续编辑：
//定义变量
//js var a = 10;
// 1.必须以@符号开头
// 2.不能以数组开头，以数字开头会报错，报错就编译不出来
// 3.不能包含特殊字符，
@mainColor : #e92322;
如果是全局变量，在任何地方都可以用。
这个变量具有什么作用呢？
在工作开发当中，比如：variables 现在只有一个页面，这个页面当中运用了大量的192322，那整个 variables 页面里有成千上百的可能。
在成千上百个 css 文件里，可能里面会有更多的 192322。那如果老板提个需求，改成 192333，怎么办？有人想到整体循环。
那换一个老板要求所有的天空颜色都改成 192333，怎么办？
这时候老板会说，要多长时间？页面太多，这个问题要多长时间能完成？
这么多页面，可能需要两天、三天才能记完。这时候就感觉非常的苦恼，就是体力活，这时候就感觉到这个真的是太难维护了。
如果有个变量，所有用到这个颜色的地方，都使用这个变量，需要进行更改的时候只要改一下这个变量，所有跟这个变量相关的颜色都能改掉。就跟 JS 一样，定义一个变量，修改这个变量所有的都改了。这样就更好维护。就是说，本来三天完成的工作，2秒就能完成。
那么继续编辑 variables.less 文件，定义主题颜色变量，修改主题颜色变量：
a:hover{
color: @mainColor;
}
body{
background: @mainColor;
}
div{
border: 1px solid @mainColor;
}
以上 variables.less 里内容在 variables.css 里编译为：
@charset "utf-8";
/*1.这样的注释是会编译到 css 当中的 css 也支持*/
a:hover {
color: #e92322 ;
}
body {
background: #e92322;
}
div {
border: 1px solid #e92322;
}
如把 variables.less 里的 @mainColor : #e92322 ;改为@mainColor : #e92333;，那在 variables.css 里的 #e92322 也全变为 #e92333。
这就是变量的使用。
