杂谈之less篇

引言：less是一门css预处理语言，就像慕课网课程里说的，这是专门为懒人准备的，这里的懒人并不是贬义词，科技的发展可以说都是懒得产物，就是因为懒才想出了各种简便之法。懒得走路，骑马，坐车；懒得自己劳动，发明了各种工具；懒得打字，用语音；...  有些时候懒是有很大的促进作用的。

接下来回到主题，这里的less主要说一些基本知识吧，先从工具开始，遵循慕课网上推荐的用koala进行编译。首先下载koala，我已开始用mac下载，下载后总是解压失败，百度后发现可能是下载速度过快，下载不完全导致（不知道是不是，反正换个电脑在Windows下下载就没问题），在Windows下下载解压后拷到mac下。因为我是看了视频后自行下载安装的，下面就是我的安装及使用过程：

1、koala基本配置：进主页后找到配置图标，把语言设置成简体中文（要退出后在进入才生效），将项目拖进koala主页后可以对着less文件单击右键弹出的弹框中有设置输出路径。不单击右键，只点击一下弹出的是其他属性。

2、因为昨晚看了视频，以为自己会写的，但是打开koala后新建了文件与文件夹，按照记忆设置了选项，在index里写了代码，也在less里写了，刷新页面没反应，没反应是因为index.html页面忘了配置link引用css文件。

3、用webstorm编写less输出的css没有自动更新（我用的是webstorm编辑器）：在webstorm配置里找到file watchers 点击右边框底部的加号，把less添加进去即可（默认配置不用修改）。

上面几步是我遇到的问题。下面介绍我知道的less。

1、变量

less的变量定义的挺简单，用@声明即可，注意：下面的代码是在main.less里写的。

@body_color: blue;

body {
  background-color: @body_color;
}

下面是编译后的css文件。（两个文件名分别为main.less,main.css）这里的main.css是自动生成的，即只需要写less文件，不用管css。

body {
  background-color: #0000ff;
}

以上就是简单的演示了下变量的定义与引用。

2、混合

1）带括号混合
这种混合类似于函数，是大样式嵌套小样式，看代码

.border_box(@box_height:100px ,@box_width: 100px){
  height: @box_height;
  width: @box_width;
}

#content{
  background-color: red;
  border: 1px solid green;
  .border_box();   //使用默认参数
}

这就是一个嵌套，content引用.border时记得带括号，这段代码使用了默认参数，也可以自己定义参数，当然不带参数也可以。看main.css代码

#content {
  background-color: red;
  border: 1px solid green;
  height: 100px;
  width: 100px;
}

可以看到:  .border();混合方式直接把.border里的内容拷贝到content里。
2）不带括号

下面的代码我们加了一个.border_style样式，注意： 这里没有(),混合引用时有没有加()。

.border_style{
  border-width: 1px;
  border-style: solid;
  border-color: green;
}

#content{
  background-color: red;
  //border: 1px solid green;
  .border_style;
  .border_box();
}

再对比main.css

.border_style {
  border-width: 1px;
  border-style: solid;
  border-color: green;
}
#content {
  background-color: red;
  border-width: 1px;
  border-style: solid;
  border-color: green;
  height: 100px;
  width: 100px;
}

此时会发现 .border_style{}里面的东西在main里也有，这和.border_box(){}不同，后一个在main.css里是没有单独的.border_box(){}样式的。

3、匹配

匹配有点类似于java或c++中的多态，同一个函数名参数不同，引用时通过参数进行区分，这里也是类似

.border_match(top,@boxWidth: 5px, @boxColor: red){
  border-width: @boxWidth;
  border-color: @boxColor transparent transparent transparent;
}

.border_match(bottom,@boxWidth: 5px, @boxColor: red){
  border-width: @boxWidth;
  border-style: solid;
  border-color: transparent transparent @boxColor transparent;
}

.border_match(left,@boxWidth: 5px, @boxColor: red){
  border-width: @boxWidth;
  border-style: solid;
  border-color: transparent transparent transparent @boxColor;
}

.border_match(right,@boxWidth: 5px, @boxColor: red){
  border-width: @boxWidth;
  border-style: solid;
  border-color: transparent @boxColor transparent transparent;
}

.box{
  .border_box();
  .border_match(bottom);
  background-color: azure;
}

上图及代码就是一个简单的匹配演示。

4、运算

这里的运算其实就是变量的逻辑运算，看代码

@mathWidth: 50px;

.math{
  margin-top: 20px;
  width: @mathWidth+100;
  height: 50px;
  border: 1px solid green;
}

再看main.css里的

.math {
  margin-top: 20px;
  width: 150px;
  height: 50px;
  border: 1px solid green;
}

编译后的结果就是运算的结果。

5、嵌套

下面代码一和代码二的实现效果是一样的。

less语序引入其他less文件，用@import “”；的形式，注意引入的文件不用加less后缀名，引入css要加后缀名，还要加()。
@import "ku"; //引入ku.less文件
@import "a.css"; //在编译后的css文件里也是这种引入，并没有如其他less那样加载文件里
@import (less) "a.css"; //这样的引用类似于引less文件，注意：()前后都有空格，这个import放在哪实际位置就在哪，想放前面就把这个引入放前面，想放后面引入时就放在后面
好了，less部分差不多就这些了，剩下的就是熟能生巧，多加练习吧差点忘了上github地址了，虽然我觉得没必要，还是给一个吧：https://github.com/dwenb/koalaTest。

//代码一
.list{
  margin-left: 300px;
  width: 100px;
  background-color: antiquewhite;
  border: 1px solid green;
  li :hover {
      color: red;
  }
}
//代码二
.list{
  margin-left: 300px;
  width: 100px;
  background-color: antiquewhite;
  border: 1px solid green;
  li {
    &:hover {
      color: red;
    }
  }
}

编译后的main.css都相同，都是下面这个

.list {
  margin-left: 300px;
  width: 100px;
  background-color: antiquewhite;
  border: 1px solid green;
}
.list li:hover {
  color: red;
}

注意： 代码二中“ & ”代表的是上一层选择器。
6、引入其他less文件

less语序引入其他less文件，用@import “”；的形式，注意引入的文件不用加less后缀名，引入css要加后缀名，还要加()。
@import "ku"; //引入ku.less文件
@import "a.css"; //在编译后的css文件里也是这种引入，并没有如其他less那样加载文件里
@import (less) "a.css"; //这样的引用类似于引less文件，注意：()前后都有空格，这个import放在哪实际位置就在哪，想放前面就把这个引入放前面，想放后面引入时就放在后面
好了，less部分差不多就这些了，剩下的就是熟能生巧，多加练习吧！
差点忘了上github地址了，虽然我觉得没必要，还是给一个吧： https://github.com/dwenb/koalaTest。