20170710

新学习到的知识：

• 在https://nodejs.org/en/ 下载node.js并安装
• $ npm –v & $ node –v：查询版本
  which node & which npm：查询位置
• $ sudo npm install -g less：安装强调内容
  从网上查安装成功应该显示很多行，不知道为什么自己只有这几行，在这个步骤，试了好多次，用了$ npm install –g less（全局）和$ npm installless（本地）都不行，最后加上sudo，以管理员身份执行，才不报错。
• 使用方式
  
  • 一共有三种方式：客户端、服务器端和使用编译生成的静态CSS文件。在实际项目开发中，更推荐使用第三种方式，将LESS文件编译生成静态CSS文件，并在HTML文档中应用。
  • 使用服务器端这个方式测试了一下，大概明白了过程，打开终端，进行如下操作：
    首先，要定位到less文件的目录下；
    输入命令：lessc+空格+less文件名，控制台会把编译的css输出；
    输入命令：lessc+空格+less文件名+空格+大于号+空格+css文件名，在css文件夹中会多一个css文件，即转换完成。
    存在疑问：虽然完成了转换，但是怎样把它关联到html文件中？看到资料里写到用@import，但是还是不是特别明白。后来查资料，得到了如下结论（但是不知道对不对）：情况一使用less文件，直接用客户端方式，直接link less文件，条件是优先加载 lesscss.js；情况二 使用css文件，可使用grunt或者gulp这样的工具监听less文件内容，内容改变动态编译less更新css文件。
• 变量
  LESS中的变量和其他编程语言一样，可以实现值的复用，同样它也有生命周期，也就是Scope（变量范围，开发人员惯称之为作用域），简单的讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。自己的理解就是就近找，比较懒。

• Mixins（混入）

  • 在LESS中，混入是指在一个CLASS中引入另外一个已经定义的CLASS，就像在当前CLASS中增加一个属性一样。看到了一个例子：

    // 定义一个样式选择器 .roundedCorners(@radius:5px) {    -webkit-border-radius: @radius;       -moz-border-radius: @radius;            border-radius: @radius;  }  // 在另外的样式选择器中使用 #header {    .roundedCorners;  }  #footer {    .roundedCorners(10px);  }

    在这个例子中看到了less的好处，解决兼容性问题还是不错的。

  • 像JavaScript中arguments一样，Mixins也有这样一个变量：@arguments。@arguments在Mixins中具是一个很特别的参数，当Mixins引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去很多代码。

  • 命名空间，举例：

    #mynamespace { .home {...} .user {...} }

    定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace> .user。

• 嵌套，直接举例子：

  HTML：

  <div id="home"> <divid="top">top</div> </div>

  LESS：

  #home{   color : blue;   width : 600px;   height : 500px;   border:outset;   #top{       border:outset;       width : 90%;   } }

• 运算及函数

  • 数值之间可以产生联系，对数值型的value进行加减乘除四则运算；

  • LESS 提供的针对颜色操作的函数列表

    lighten(@color, 10%); // return a colorwhich is 10% *lighter* than @color darken(@color, 10%); // return a colorwhich is 10% *darker* than @color saturate(@color, 10%); // return a color10% *more* saturated than @color desaturate(@color, 10%);// return a color10% *less* saturated than @color fadein(@color, 10%); // return a color 10%*less* transparent than @color fadeout(@color, 10%); // return a color 10%*more* transparent than @color spin(@color, 10); // return a color with a10 degree larger in hue than @color spin(@color, -10); // return a color with a10 degree smaller hue than @color

• Comments（注释）
  单行注释和多行注释，与JavaScript中的注释方法一样，需要注意的是，LESS中单行注释(//单行注释)是不能显示在编译后的CSS中，所以如果注释是针对样式说明的要使用多行注释。