Less即学即用学习总结@慕课网原创_慕课网

1、Sublime Text3安装less

使用DreamWeaver可以直接创建less文件进行编辑，考虑到软件的启动速度和简洁性，此处用sublime进行less文件的文本编辑。为了使得less文件有语法高亮的美观效果，并能够顺利编译成CSS文件，首先需要从sublime上安装less和less2css包。

使用快捷键ctrl-shift-p，打开package control，选中install package，分别搜索less和less2css，按回车安装这两个包。

2、less文件与编译

所有less文件的后缀名是*.less，创建此文件后，用sublime打开，在首行进行声明：@charset "utf-8";这样整个less文件就构造好了。

然而less文件并不能直接参与到HTML文档中进行样式操作的，需要通过编译成CSS，然后由link标签引入样式表到HTML文档中去，这里主要下载koala客户端，将less文件夹添加到客户端里，点击编译，出现“success”即为编译成功。

3、变量、注释和运算

在less文件中，当一个值需要反复使用时，可以通过@符号定义变量。已经被赋值的变量以及其他的常量（如像素、颜色等）都可以参与运算。在less中和大多数编程语言一样，可以使用“//”作为注释，注释的内容不会被编译到CSS文件中去。如以下less代码：

@charset "utf-8";

/*CSS的注释编译时会保留*/
@box_width:300px; //定义并初始化变量
.box{
    width: @box_width + 100; //使用变量,并进行运算
    height: @box_width - 2*50; //注意变量和数字之间要留空格，否则编译不通过
    background: yellow;
}

编译后的CSS代码如下：

@charset "utf-8";
/*CSS的注释编译时会保留*/
.box {
  width: 400px;
  height: 200px;
  background: yellow;
}

4、混合与嵌套

如下less代码，box3的样式里面引用了box的所有样式，并且额外的还设置了左外边距为100px。混合就是把一个样式的选择器作为值写在另一个样式里。

.box3{ //引用box的全部样式并且使得左边距为100px
    .box;
    margin-left: 100px;
}

编译后的CSS代码如下：

.box3 {
  width: 400px;
  height: 200px;
  background: yellow;
  margin-left: 100px;
}

除了这种最简单的混合外，less还支持带参数的混合以及有默认参数值的混合。如下面的例子所示：

//带参数的混合
.border_width1(@b_width){
    border: solid blue @b_width;
}

.test_mix1{
    .border_width1(5px);
}

//参数有默认值的混合
.border_radius(@radius:5px){
    border-radius: @radius;
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
}

.test_radius{
    .border_radius();  //此处即为默认值，若要修改默认值也可在此处进行修改
    width: 100px;
    height: 20px;
    background: pink;
}

编译后的CSS文件如下：

.test_mix1 {
  border: solid #0000ff 5px;
}
.test_radius {
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  width: 100px;
  height: 20px;
  background: pink;
}

有的时候，需要一次性将所有的参数全部传进去，此时使用@arguments可以更加方便。

//@arguments代表传进所有的参数
.border_arg(@c:red,@w:3px,@x:solid){
    border:@arguments; 
}

.test_arg{
    .border_arg(40px);  //查看CSS文件的变化，默认值传进来了，线粗改为40px
}

css文档编译后如下：

.test_arg {
  border: 40px 3px solid;
}

在HTML文档中，标签之间经常会有嵌套的情况存在，在less中也可以进行嵌套。有下列HTML标签：

<ul class="list">
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
        <li><a href="#">这是一个测试文字</a><span>2014-10-10</span></li>
    </ul>

使用less为其添加样式，可以使用嵌套。

//嵌套
.list{
    width: 600px;
    margin: 30px auto;
    padding: 0;
    list-style: none;
    li{  //嵌套在list下的li
        height: 30px;
        line-height: 30px;
        background: pink;
        margin-bottom: 3px;
        padding: 0 10px;
    }
    a{  //也可以嵌套在li里面，但是嵌套层次太多影响CSS的效率
        float: left;
        //&代表上一层选择器
        &:hover{
            color: red;
        }
    }
    span{
        float: right;
    }
}

编译后的CSS如下所示：

.list {
  width: 600px;
  margin: 30px auto;
  padding: 0;
  list-style: none;
}
.list li {
  height: 30px;
  line-height: 30px;
  background: pink;
  margin-bottom: 3px;
  padding: 0 10px;
}
.list a {
  float: left;
}
.list a:hover {
  color: red;
}
.list span {
  float: right;
}

两者相比较而言，less的确省去了很多的代码量。

5、匹配模式

在开发前端页面的过程中，经常会有样式相近重复率高的情况出现。比如编写一个三角箭头小图标，颜色、大小、箭头朝向在不同的地方各不相同。如果一个一个地去写样式就非常麻烦。less中的匹配模式，就可以统一模板，在需要的时候，根据情况调用即可。

//匹配模式：三角形小图标的例子
.triangle(top,@width:5px,@color:white){  //匹配三角形朝上的情况
    border-color:transparent transparent @color transparent;
    border-width: @width;
}

.triangle(bottom,@width:5px,@color:white){  //匹配三角形朝下的情况
    border-color:@color transparent transparent transparent;
    border-width: @width;
}

.triangle(left,@width:5px,@color:white){  //匹配三角形朝左的情况
    border-color:transparent @color transparent transparent;
    border-width: @width;
}

.triangle(right,@width:5px,@color:white){  //匹配三角形朝右的情况
    border-color:transparent transparent transparent @color;
    border-width: @width;
}

.triangle(@_,@width:5px,@color:white){  //无论什么情况都要执行的代码,第一个参数是固定的格式
    width: 0;
    height: 0;
    overflow: hidden;
    border-style:solid;
}

.sanjiao{
    .triangle(left,10px,black);  
}

上面的less中通过3个参数，将颜色、线条和朝向都构造成了相应的匹配模式，最后调用了黑色、线条为10px、朝左的箭头。css样式表中如下：

.sanjiao {
  border-color: transparent #000000 transparent transparent;
  border-width: 10px;
  width: 0;
  height: 0;
  overflow: hidden;
  border-style: solid;
}

6、避免编译

有些情况下，我们不需要less中的某些内容被自动编译，而是保留下来原样放到CSS中，此时可以使用~‘ ’：

//避免编译
.test_avoid{
    width: ~'(300px-100px)';
}

css中的代码如下：

.test_avoid {
  width: (300px-100px);
}

上述就是less中的基本内容，总之less可以极大的减少css代码的编写量，易学易用，可以像编程一样对HTML中标签进行样式设计。

注：文章根据本站相关课程的学习笔记整理而来，有错误或其他任何问题敬请指正，欢迎共同学习交流！