Less小谈

1.Less是什么？

 

        1.Less 是一门 CSS 预处理语言，就是css语言的超集，比css更丰满，它扩展了 CSS 语言，增长了变量、Mixin（混合语法）、函数等特性，使 CSS 更易维护和扩展。

        

        2.Less 能够运行在 Node 或浏览器端。能够直接把样式文件“style.css”直接改为“style.less”，能正常工做。如：<link rel="stylesheet" href="1.less">（成功了）

        3.浏览器端用法

               须要一个脚本的支持，这个脚本咱们把他叫作less.js（须要下载）

               代码<link rel="stylesheet/less" type="text/css" href="styles.less" />

              <script src="less.js" type="text/javascript"></script>

 

2.Less有什么呢？

      1.变量

                   1.定义变量
                        @变量名：变量值

                 2.使用

                   代码以下：

                           @w:100px;

                            body{

                                   width:@w;

                                    }

           2.能够嵌套

                代码以下：

                      如：body{

                                         width:100px;

                                            p{
                                         height:100px;
                                              }
                                          }

            3.Minxin

                Minxin其实也是一种嵌套，它充许你将一个类嵌入到另外一个类中，而被嵌入的这个类也称为是一个变量。就是你能够用一个类定义CSS，而后把整个为看成一个变量来使用，嵌入到另外一个类中看成它的属性。   

                  代码以下：              

                                  /* 定义一个类 */
                                .r(@radius: 5px) {
                                          -moz-border-radius: @radius;
                                          -webkit-border-radius: @radius;
                                            border-radius: @radius;
                                       }
                                /* 定义的类应用到另个一个类中 */
                                  ＃header {
                                     .r;
                                    }
                                   #footer {
                                   .r(10px);
                                      }

 

                 

            4.Import

                     咱们能够在开发阶段将样式放到多个文件中，最后经过@import 的方式合并,还能够相互引用。
                               // main.less
                                     @btnColor: red;
                                     @import url('_buttom.less');

                                     body{
                                      width: 1024px;
                                         }

                              // _buttom.less
                                   .btn{
                                    color: @btnColor;
                                       }

         5.函数
                       内置函数

                               - lighten：将一个颜色变亮
                               + lighten(#000, 10%); // #1a1a1a
                                - darken：将一个颜色变暗
                               + darken(#000, 10%); // #e6e6e6

       总结：以上是我我的理解的东西，若有错误，欢迎指出！