Less 文档查看心得

1，函数

　　color 颜色运算，常用的两个函数 lighten（亮度）和 darken（变暗）；

　　如:  .class{  color: lighten(red,10%);   }可使红色变亮10%。

2，变量 Variables

　　URLs的使用，

　　@images:   "../img";

　　body{     background: url("@{images}/white-sand.png");   }

　　这样使用的好处是可以当图片路径改变后，可通过改变@images的值，统一改变路径。

3，Extend 扩展

　　如：

　　.class1{    color: red;     }

　　.class2{   &:extend(.class1);   background: white;     }

　　CSS输出为：

　　.class1，.class2{    color: red;     }

　　.class2{     background: white;     }

　　可见，extend会将.class2加到.class1的后面；该方法可与mixins属性区别在于只调用到.class1的样式，而.class子标签的样式不调用，mixins如：

　　.class1{

　　　　color: red;

　　　　p{

　　　　　　color: blue;

　　　　}

　　}

　　.class2{

　　　　.class1;

　　}

　　这样.class2 p的color也会为blue；

　　extend的用处可使我们再调用其它class的样式时，不用顾忌到被调用class内部标签的样式。它可以包含多个要扩展的类，使用逗号分割即可。

　　经典用例：

　　如果你想有一个animal子类型，并且要重写背景颜色。那么你有两个选择，首先改变你的HTML

　　<a class="animal bear">Bear</a>

　　.animal {
  　　background-color: black;
  　　color: white;
　　}
　　.bear {
  　　background-color: brown;
　　}

　　或者简化HTML，然后在你的less中使用extend，比如：

　　<a class="bear">Bear</a>

　　.animal {
  　　background-color: black;
  　　color: white;
　　}
　　.bear {
  　　&:extend(.animal);
  　　background-color: brown;
　　}

4，Mixins

　　如果你想要创建一个混合集，但是却不想让它输出到你的样式中，你可以在混合集的名字后面加上一个括号。

　　如：.class(){}，调用是可正常调用。

　　@arguments变量：

　　.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {

　　　　-webkit-box-shadow: @arguments;

　　　　-moz-box-shadow: @arguments;

　　　　box-shadow: @arguments;

　　}

　　可让你不用写多个参数。

　　为了避免样式干扰或者被别的样式干扰，我们将一些公用的样式创建分组，然后在使用的时候直接调用。例如，如果我们创建了一个名为“default”的样式分组，我们就可以在使用到的时候直接从该组中调用。　　

#defaults {
  .nav_list () {
    list-style: none;
    margin: 0; padding: 0;
   }
   .button () { … }
   .quote () { … }
}调用：.class{　　#defaults .nav_list;}

5，媒体查询

　　.desktop-and-old-ie{

　　　　@media screen and (min-width: 1200) { background-color: red; }

　　}

　　对应的CSS为：

　　@media screen and (min-width: 1200){

　　　　.desktop-and-old-ie{

　　　　　　background-color: red;

　　　　}　　

　　}

　　这样，可不用再返回来多写一遍.desktop-and-old-ie。

6，匹配表达式

　　为了尽可能的保持CSS声明的本质，Less选择实现了guarded mixins，而不是if/else语句，也就是说并不是一脉相承的实现@media查询的规范。

　　例子：

　　.mixin (@a) when (lightness(@a) >= 50%) {

　　　　background-color: black;

　　}

　　.mixin (@a) when (lightness(@a) < 50%) {

　　　　background-color: white;

　　}

　　.mixin (@a) {

　　　　color: @a;

　　}

　　我们可以通过这样的表达式，来判断<a>的样式，如：

　　.color (@a) when (@a = @linkColor){

　　　　&:hover{

　　　　　　background-color:white;

　　　　}

　　}　　

　　.color (@a) when (@a = @linkColorHover){

　　　　&:hover{

　　　　　　text-decoration: underline;

　　　　}

　　}

　　a{

　　　　.color(参数);

　　}

7，递归循环

　　在Less中，混合可以调用它自身。这样，当一个混合递归调用自己，再结合Guard表达式和模式匹配这两个特性，就可以写出循环结构。

　　使用递归循环最常见的情况就是生成栅格系统的CSS：

　　.generate-columns(4);

　　.generate-columns(@n, @i: 1) when (@i =< @n) {

　　　　 .column-@{i} {

　　　　　　width: (@i * 100% / @n);

　　　　}

　　 .generate-columns(@n, (@i + 1));

　　}

　　生成的CSS：

　　.column-1 { width: 25%; }

　　.column-2 { width: 50%; }

　　.column-3 { width: 75%; }

　　.column-4 { width: 100%; }

8，&运算符

　　&运算符表示它的父元素的class名，P.S： 不是最亲近的父元素，而是全部的父元素

　　&可以这么运用：

　　.button {

　　　　&-ok { background-image: url("ok.png"); }

　　　　&-cancel { background-image: url("cancel.png"); }

　　　　&-custom { background-image: url("custom.png"); }

　　}

　　输出：

　　.button-ok { background-image: url("ok.png"); }

　　.button-cancel { background-image: url("cancel.png"); }

　　.button-custom { background-image: url("custom.png"); }

　　这样可以少写些相同前缀的class名，使代码简洁。

Less 文档查看心得