css之less学习笔记

1.1.less介绍：less将css动态化，比如具有变亮，继承，运算，函数。less可以运行在客户端（支持IE6），也可以借助Node.js或者Rhino在服务器端运行。

（本人为目前接触过Rhino）。

2.1变量。变量支持单独定义通用样式，在需要的时候调用，在全局样式调整的时候只需要修改几行代码。

  例如：

        @color：red;

        #header{ color: @color; }

        h2{ color: @color; }

     以上三行代码等价于：

       #header{ color：red; }

       h2{ color: red; }

2.2混合.混合可以将定义好的一个class A已入到另一个 class B中，从而实现B继承A的所有属性。还可以带参数调用。

 例如：

     .rounded-corners (@radius: 5px) {

               border-radius: @radius;

               -webkit-border-radius: @radius;

               -moz-border-radius: @radisu;

                }

        #header{ .rounded-corners; } 

         #footer{ .rounded-corners; }

          以上代码等价于：

          #header{

                border-radius: 5px;

               -webkit-border-radius: 5px;

               -moz-border-radius: 5px;

              }

         ..............;

2.3嵌套规则。在一个选择器中嵌套另一个选择器来实现继承，大大减少代码量。

  例如：

     #header{

             h1{

                        font-size: 28px;

                        color: red;      

                }

               p{

                           font-size: 26px;

                           a{

                                        text-decoration: none;     

                                        &:hover{

                                                         border-radius: 4px;                                       

                                                         }                 

                                   }

                         }

                  }

以上代码等价于：

    #header h1{ font-size: 28px; color: red; }

    #header p{ font-size: 256px; }

    #header p a { text-decoration: none;  }

    #header p a:hover{ border-radius: 4px; }