67LESS的基本用法

LESS的基本用法有：变量、混合、嵌套、运算。

（1）变量：:变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。
        // LESS        @color: #4D926F;
                      .headerr {   
                                color: @color;
                       }

        // CSS         .headerr {
                                color: #4D926F;  
                       }

（2）混合：:混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
                    我们还可以带参数地调用，就像使用函数一样。
        // LESS       .rounded-corners (@radius: 5px) {
                                    border-radius: @radius;
                            }
                            .headerr {
                                .rounded-corners;
                            }
                            .footerr {
                                .rounded-corners(10px);
                            } 

        //CSS           .headerr {
                                  border-radius: 5px;
                           }
                           .footerr {
                                  border-radius: 10px;
                           }

（3）嵌套规则：在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。
        // LESS         .headerr {
                                    h1 {
                                        font-size: 26px;
                                        font-weight: bold;
                                    }
                                    p { font-size: 12px;
                                        a { text-decoration: none;
                                              &:hover { border-width: 1px }
                                        }
                                    }
                              }

        //CSS            .headerr h1 {
                                    font-size: 26px;
                                    font-weight: bold;
                              }
                              .headerr p {
                                    font-size: 12px;
                              }
                              .headerr p a {
                                    text-decoration: none;
                              }
                              .headerr p a:hover {
                                    border-width: 1px;
                              }

（4）函数 & 运算：运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。
         LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。
        // LESS         @the-border: 1px;
                             @base-color: #111;
                             @red: #842210;
                             .headerr {
                                    color: @base-color * 3;
                                    border-left: @the-border;
                                    border-right: @the-border * 2;
                              }
                              .footerr {
                                    color: @base-color + #003300;
                                    border-color: desaturate(@red, 10%);
                              }

        // CSS            .headerr {
                                      color: #333;
                                      border-left: 1px;
                                      border-right: 2px;
                              }
                              .footerr {
                                     color: #114411;
                                     border-color: #7d2717;
                              }

转载于:https://www.cnblogs.com/gushixianqiancheng/p/10967007.html