{Less} is more, than Css

【项目概要】
    来公司的第一周，除第一天安装环境，了解需求外，四天的时间都是在写一个静态页面。之前写静态页面，都是直接用的CSS去对样式进行设置，而在公司的这个项目中，用的是CSS预处理器的一种，Less. 本篇博客就来学习一下Less.
【Less学习】

    一.什么是Less
        LESS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。
        LESS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

    二.Less语言特性

        1.变量：
             变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。
Less源码：

@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}

编译后的CSS：

#header {
color: #4D926F;
}
h2 {
color: #4D926F;
}

2.混合：

         
  混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
Less源码：

.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}

#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

编译后的CSS：

#header {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
#footer {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}

3.嵌套：

         
  我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
Less源码：

#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p {
font-size: 12px;
a {
text-decoration: none;
&:hover {
border-width: 1px
}
}
}
}

编译后的CSS：

#header h1 {
font-size: 26px;
font-weight: bold;
}
#header p {
font-size: 12px;
}
#header p a {
text-decoration: none;
}
#header p a:hover {
border-width: 1px;
}

4.函数和运算:

         
  运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
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%);
}

编译后的CSS：

#header {
color: #333;
border-left: 1px;
border-right: 2px;
}
#footer {
color: #114411;
border-color: #7d2717;
}

【项目实战】


一.安装与监听：

1. Install less

   npm install -g less

 

2. Install less-watch-compiler

   npm install -g less-watch-compiler

 

3. Watch less's change and compile it to css

   less-watch-compiler

    注：执行1,2命令，最好是在管理员的权限下。执行3命令，是在Less文件的目录下。

二.配置less文件与css文件间的关系

{
"allowedExtensions":[".less"],
"minified": false,
"defaults": {
"watchFolder": "style/less",
"outputFolder": "style/css"
}
}

三.在页面中添加CSS文件的引用

<link href="../style/css/navi.css" rel="stylesheet" type="text/css"/>

四.导航部分页面代码

<!-- 导航标题栏-胡志婷-2016年4月19日15:26:51 -->
<div class="navi" >

<img class="logo" src="../style/images/Lenovo-logo_03.png"/>
<div class="title">Lenovo Maker</div>

<img class="more" src="../style/images/icon汉堡包_06.png" onclick="divShow()" />

</div>

五.所对应的Less源码

@font-color-white: FFFFFF;
@font-size-thirty: 30px;
@margin-left-body: 16px;

.navi {
height: 88px;
background-color: 303030;
.logo{
margin-top: 10px;
margin-left: @margin-left-body;
}
.title {
font-size: @font-size-thirty;
color: @font-color-white;
margin-left: 450px;
width: 220px;
height: 25px;
margin-top: -55px;
}
.more{
margin-right: @margin-left-body;
float: right;
position: relative;
margin-top: -20px;
margin-left: 750px;
}
}

六.编译后的CSS：

.navi {
height: 88px;
background-color: 303030;
}
.navi .logo {
margin-top: 10px;
margin-left: 16px;
}
.navi .title {
font-size: 30px;
color: FFFFFF;
margin-left: 450px;
width: 220px;
height: 25px;
margin-top: -55px;
}
.navi .more {
margin-right: 16px;
float: right;
position: relative;
margin-top: -20px;
margin-left: 750px;
}

七.页面截图：

【学习总结】

        对于Less，自己之前真没接触过。在我们敲代码前，组长给我们说了说怎么去写，其实和CSS差不多，就是增加了变量的写法。但第一版代码写完后，自己觉得使用Less和CSS没什么区别，用变量去设置值，反而让我多花时间去定义变量。

        等到后来，组长给我们指出了很多问题，比如：写法上应该嵌套，这样不写什么注释也能很清楚看到是哪个部分的代码；不是所有的设置都使用变量，这样反而失去了Less存在的意义......随后，组长就让我们重构一版代码......

        经过组长的点播和自己上网查到的一些相关资料，重构完一版代码后，自己才算是对Less的使用有了一些便利的体会。我们可以在Less中利用运算去对页面布局尺寸进行设置；利用变量去对页面公共部分进行统一设置，利用嵌套去减少代码量，更加简洁方便看自己的代码......
        这应该算是Less一些最基本，最简单的使用吧，期待后面的学习会发现一些更深层次的，更强大的地方。