板顶端输入“key”,找到快捷键设置项“Keymap”，在右侧找到“External Tools”点开，点选“LESS”并单击右键，选择“Add Keyboard Shortcut”,在出现其面板的“First Stroke”处同时按下“Alt+L”键，这样就将“Alt+L”设置为将less文件编译成css文件的快捷键。
最终，生成的css样式，如下：
至此已成功将less文件编译成css文件。
2.认识less的四大特性
LESS 拥有四大特性：变量variables、混入mixins、嵌套、函数operations。
变量variables它官方的意思是允许像函数那样定义常量值，然后调用到其他地方。
它可以只是用@前缀定义常量，调用。也可以用@前缀定义已经定义变量的@前缀。随便也插入sass的知识。
对于sass的变量是以$前缀定义常量的，同时也跟less一样可以定义变量的变量。
如：
@base0:20px;
@base1:@base0+40px;
@global-color:blue;
header{
background:@global-color;
padding:@base1;
}
而生成的css样式是这样的：
header {
background: blue;
padding: 60px;
}
其实我认为变量功能上实际是可以代替原生css的base样式表的基础样式功能。
其二就是升华为可以计算和循环的语法。使其真正意义上的向编程语言靠拢。可变性和可循环性增强。暂时理解是这样。
再来一个深加工
@base0:20px;
@base1:@base0+40px;
@global-color:blue;
.bor-radius (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
header{
background:@global-color;
padding:@base1;
.bor-radius(30px);
}
#div1{
background:pink;
.bor-radius;
}
生成的css是这样的
header {
background: blue;
padding: 60px;
border-radius: 30px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
}
#div1 {
background: pink;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
暂时很好理解。我是将它当excel里的函数来理解的。
前面的例子总结一下是，用到了变量计算+变量混合（混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。）
再来研究一下嵌套规则
#div1{
background:pink;
.bor-radius;
h1{
font-size:26px;
}
span{
font-size:12px;
a{
text-decoration:none;
&:hover{color:yellow;
}
}
}
}
它乱结构了，这个就调整了。以下没时间一个一个的调哦。
他的css生成是这样的。
#div1 h1 {
font-size: 26px;
}
#div1 span {
font-size: 12px;
}
#div1 span a {
text-decoration: none;
}
#div1 span a:hover {
color: yellow;
}
当然要放上html里的代码才容易理解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="less/styles.css">
</head>
<body>
<header>
<div id="div1">
<h1>sb</h1>
<span><a href="#">666</a></span>
</div>
</header>
</body>
</html>
这么说吧，less给我的感觉是，使用{}括号像编程语言这样嵌套子元素。而css是固有的通过>或者空格“ ”来说明下方是其子元素。而使用less还可以明确的知道他们之间的关系。
还有要说一下的是，有个变量作用域这种说法，其实就是变量可以重复赋值。
不知道看官，有没有注意到一个问题，就是我在.bor-radius中的代码
.bor-radius (@radius: 5px) {
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}
我觉得这里也是使用预处理的原因之一吧！直接省掉很多浏览器兼容的语句。
哦，虽然12点多了，但是还要说一下的是如何调用多个less文件！
网上也给出了方法，就是import
比如A.less里面定义了一个变量@aaa:red，而B.less文件里面也需要使用@aaa这个变量,那么
A.less内容如下：
B.less内容如下：
@import 'A.less';
div{
color:@aaa;
}
然后再html页面引入B.less文件，编译最终可以得到如下结果
往大说，就是当多个less在一个总less里通过import引入，然后再html里调用总less，就可以调用所有的less了。
也差不多是这些了。
明天计划的事情：
继续熟悉less预编译和认识一下sass，并了解他们语法的区别。同时要把大娃师兄指出的两点test9里的问题解决掉。而且师兄也给了些提示。明天要学习一下伪类focus和flex布局的负影响
这能很好的让我缩短时间。感谢我遇上了这个学习的机构。