Less学习总结

在学习less之前首先要对它有一个整体上的理解并存在这样的疑问：

—什么是less？

—为什么要有less？

—它和直接写css相比的优点在哪里？

—在实际工作中用到了less的那些特性？

只有带着问题和疑惑去学习一个新知识才能更好的认识它达到学有所长的目的，下面就我对less学习的心得和体会做一个简单的总结希望对大家的学习过程有所帮助。

首先，less是一种动态样式语言,对比css而言有以下几点优势:

1、嵌套规则

通过选择器名间的嵌套(包裹)来实现层次化的赋予选择器样式，这样使得样式层次清晰，增强了层次间的联系也避免了出现由于层次结构不清而导致的样式设置错误情况的出现；同时减少了代码量，在进行串联选择器的时候使用&是十分高效的，尤其是针对:hover,:selected等伪类样式的设置。

举个例子：

使用less进行编写：

    li {
        border-top: 1px solid red;
        &:first-child {
            border-top: 0;
        }
        a {
            display: block;
        }
    }

编译后的css：

li{
    border-top: 1px solid red;
}
li:first-child{
    border-top: 0;
}
li a{
    display: block;
}

这里既缩减了代码量又使得结构清晰易理解，使得css样式编写更高效。

2、变量

提供了变量的概念，可以单独定义一系列样式，在后续样式中进行使用，使得全局调整更为简便；同时提升了css语义化，在协同工作时可以通过变量名来了解前期开发者想表达的意图。

举个例子：

有这样一个less文件 var.less ，它里面定义了一些变量:

//框架布局
@height-nav-bar: ‘168px’;   //导航栏
@height-main-menu: ‘147px’; //主菜单

@font-size-nav-bar-title: ’58px’; //导航栏主标题PT
@font-size-nav-bar-sub: ’48px’;   //导航栏副标题PT
@font-size-main-nav: ‘30px’;     //主菜单PT

日后在需要使用这些定义好的变量的时候，只需在文件开头进行引入即可，这样既便于基础样式的设置也便于修改和理解，使得css更具备语义化，引入方式为： @import url(“/widget/common/css-base/src/var.less");

使用方式为：

li a{
    height : @height-main-menu;
}

3、mixin

mixin混合(也包含了函数)，可以将已经定义好的样式引入到新的选择器中，实现了样式的继承；同时可以实现函数模式带参数进行调用，能够更好的根据需求进行修改，实现了样式代码片段的复用。

举个例子：

@radix: 100;
.px2rem(@name, @px) {
    @{name}: @px / @radix * 1rem;
}

这里是定义了一个自动将px转换成rem的类，每次使用时只要将相应的样式名和对应的尺寸大小即可自动进行转换<这个功能的实现不只是用到了less，还涉及了动态获取浏览器宽度及设置根字体大小，这些知识需要另外进行了解。

使用时：

h1 {
  .px2rem(font-size, 100);
}

即可实现样式的继承和复用。

其次，在学习过程中一定要多参考公司现有的less文件，分析在实际工作中的应用场景和好处，多进行分析和总结。

最后想说的是，less的特点其实不止以上我列的这些，还有许多功能是很实用并且很有特色的，这需要你自己去探索和研究。同时在使用一些新的或是之前不怎么用到的功能的时候要考虑下如果引入这样一个功能点对当前的业务逻辑或是功能有没有什么促进作用？是不是能用什么其他的功能来进行替代？相比较而言孰优孰劣？如果是新技术更好那就是值得推广的，保持团队技术的前沿性也是很重要的。

一定要在学习的过程中有思考做比较亲操作，这样才能更好的掌握一项内容。