LESS的基本用法
什么是LESS：
LESS是一个动态样式语言，属于CSS预处理语言的一种，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护，让CSS更具有维护性，主题性，扩展性。
LESS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。
LESS的官方网站：www.lesscss.org
如何使用LESS：
在使用时，应当用编译工具进行编译后使用！
使用的编译工具：Koala
官网下载：koala-app.com
LESS文件中的注释：
1、//注释的内容 只会在less文件中显示，不会编译到css文件中去；
2、/ *注释的内容 */ 会被编译到css文件中去；
LESS中的变量
普通变量
定义方式：@变量名：变量值
@green: #801f77; @baise:white;
作为选择器和属性名
定义方式：@{ 变量名 }
@kuandu:width;
.@{kuandu}{
@{kuandu}:150px
}
作为URL
使用方式：用" "将变量的值扩起来，同样将变量以 @{ 变量名 } 的方式使用
@imgurl:"https://www.baidu.com/img/";
header{
background: @green url("@{imgurl}bdlogo.png");
height: 500px;
}
定义多个相同名称变量
@var: 0;
.class {
@var: 1;
.brass {
@var: 2;
three: @var; //这时的值是3
@var: 3;
}
one: @var; //这时的值是1
}
注意：在定义一个变量两次时，只会使用最后定义的变量
LESS混合
普通混合：
即将一系列属性从一个规则集引入到另一个规则集的方式
.font_hn{
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
编译后：
.font_hn {
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
不带输出的混合
在不想输出的混合集的名字后面加（）即可
LESS写法：
.font_hn(){
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h1{
font-size: 28px;
.font_hn;
}
h2{
font-size: 24px;
.font_hn;
}
编译后CSS：
h1 {
font-size: 28px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
h2 {
font-size: 24px;
color: red;
font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu, Helvetica;
}
带参数的混合
.border(@color){
border: 1px solid @color;
}
h1{
&:hover{
.border(green);
}
}
h2{
&:hover{
.border(#000);
}
}
编译后CSS：
h1:hover {
border: 1px solid #008000;
}
h2:hover {
border: 1px solid #000000;
}
注意：&符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus
带多个参数的混合
什么是多参数：一个组合可以带多个参数，参数之间推荐使用分号分开。
LESS写法：
.mixin(@color; @padding:xxx; @margin: 2) {
color-3: @color;
padding-3: @padding;
margin: @margin @margin @margin @margin;
}
.div1{
.mixin(red;)
}
.div2 {
.mixin(1,2,3;something, ele;132);
}
.div3 {
.mixin(1,2,3);
}
.div4 {
.mixin(1,2,3;);
}
编译后CSS：
.div1 {
color-3: #ff0000;
padding-3: xxx;
margin: 2 2 2 2;
}
.div2 {
color-3: 1, 2, 3;
padding-3: something, ele;
margin: 132 132 132 132;
}
.div3 {
color-3: 1;
padding-3: 2;
margin: 3 3 3 3;
}
.div4 {
color-3: 1, 2, 3;
padding-3: xxx;
margin: 2 2 2 2;
}
注：如果传参的括号中全都是以逗号分隔，那么会依次传给各个属性值；如果传参的括号中既有逗号，又有分号，那么会把分号前面的看作一个整体传给一个参数值。
命名参数
LESS写法：
.mixin(@color: black; @margin: 10px; @padding: 20px) {
color: @color;
margin: @margin;
padding: @padding;
}
.class1 {
.mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
.mixin(#efca44; @padding: 40px);
}
编译后CSS：
.class1 {
color: #33acfe;
margin: 20px;
padding: 20px;
}
.class2 {
color: #efca44;
margin: 10px;
padding: 40px;
}
注意：引用混合时通过参数名称来为混合提供参数值，不必按照任意特定的顺序来使用参数
arguments变量
.border(@x:solid,@c:red){ 编译后：.div1 {
border: 21px @arguments; border:21px,solid,#ff0000；
} }
.div1{
.border();
}
注：arguments代表所有可变参数，参数的先后顺序就是（ ）里的参数顺序，假如给第一个和第三个赋值，不能写成（值1，值2，... ，值n），需要加上原来的默认值。
函数和运算
运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
LESS写法：
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}
编译后：
#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}
函数（了解）
color: 颜色转换函数。
image-size: 从文件中获取图像的宽度及高度，可作为 image-size 样式的值。
image-width : 从文件中获取图像的宽度。
image-height: 从文件中获取图像的高度。
convert: 单位转换，如 convert(10cm, mm)。
data-uri: 用于嵌入资源，data-uri(url, mimeType)。
unit: 可用于指定单位，unit(dimension, unit)。
get-unit: 可用于获取单位，如 get-unit(30px)。
svg-gradient: 可用于转换颜色，
if: 按条件返回指定的值，if(condition, value1, value2)，当 condition 成立时，返回 value1，否则返回 value2。
字符串函数
escape: 对特殊字符使用URL编码来对字符串或信息进行编码。
e: 去除字符串的引号。
%: format 函数，用于转化字符串，如 %(string，arguments ...)。
replace: 用于替换字符串，如 replace(string, pattern, replacement, flags)。
列表函数
length: 用于获取列表的长度，如 @list: "audi", "benz", "toyota", "honda"; length(@list)。
extract: 用于获取列表中指定位置的值，如 @list: "audi", "benz", "toyota", "honda"; length(@list, 2)。
数学函数
ceil: 向上取整。
floor: 向下取整。
percentage: 将浮点数转换为百分比字符串。
round: 四舍五入。
sqrt: 获取平方根。
abs: 取绝对值，如 abs(30ft) 将获得 30ft。
sin, asin, cos, acos, tan, atan: 计算正弦、反正弦等。
pi: 返回 pi 的值。
pow: 计算幂。
mod: 计算首参相对次参的模。
min: 计算最小值，如 min(70,30,45,20)。
max: 计算最大值。
类型函数
类型函数包含 iscolor, isnumber, isstring, iskeyword, isurl, ispixel, ispercentage, isem, isunit, isruleset，返回布尔值。
参考