五分钟快速了解Less

概述

Less全称为Leaner Style Sheets，更为简洁的样式表

快速安装

npm install -g less
lessc styles.less styles.css[lessc -h]

变量

• 用法：用"@"声明变量，用":"赋值变量

  eg:

     // LESS
     @color: #4D926F;
     #header { color: @color;}
     h2 { color: @color;}
     /* 转换为CSS */
     #header { color: #4D926F;}
     h2 { color: #4D926F;}

混合

• 概念：A样式引用了B样式，A样式将继承B样式的所有属性，分无参混合和有参混合 eg:

    // LESS
     .rounded-corners (@radius: 5px) {
          border-radius: @radius;
          -webkit-border-radius: @radius;
          -moz-border-radius: @radius;
     }
     #header { .rounded-corners;}
     #footer { .rounded-corners(10px);}
     /* 转换为CSS */
     #header {
         border-radius: 5px;
         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
     }
     #footer {
         border-radius: 10px;
         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
     }

嵌套

• 概念：在一个选择器中嵌套另一个选择器，用来实现样式继承，从而减少代码量，并且增加代码的可读性。解决后代选择器相关的样式可能散布在CSS文件的任何地方问题 eg:

   // LESS
    #header {
        h1 {
            font-size: 26px;
            font-weight: bold;
        }
        p { font-size: 12px;
             a { text-decoration: none;
                   &:hover { border-width: 1px }
             }
        }
    }
    /* 转换为CSS */
    #header h1 {
        font-size: 26px;
        font-weight: bold;
    }
    #header p { font-size: 12px;}
    #header p a { text-decoration: none;}
    #header p a:hover { border-width: 1px;}

运算

• 概念：提供四则运算符 eg:

  // LESS
   @the-border: 1px;
   @base-color: #111;
   @red: #842210;
   #header {
     color: @base-color * 3;
     border-left: @the-border;
     border-right: @the-border * 2;
   }
   #footer {
     color: @base-color + #003300;
     border-color: desaturate(@red, 10%);
   }
   /* 转换为CSS */
   #header {
     color: #333;
     border-left: 1px;
     border-right: 2px;
   }
   #footer {
     color: #114411;
     border-color: #7d2717;
   }

转义

v3.5之后支持,eg:

  @min768: (min-width: 768px);
  .element {
    @media @min768 {
      font-size: 1.2rem;
    }
  }
  编译为
  @media (min-width: 768px) {
    .element {
      font-size: 1.2rem;
    }
  }

命名空间与访问器

• 概念：将一些变量或者混合模块打包封装，进行分组，更好地组织CSS和属性集的重复使用 eg:

   #bundle() {
     .button {
       display: block;
       border: 1px solid black;
       background-color: grey;
       &:hover {
         background-color: white;
       }
     }
     .tab { ... }
     .citation { ... }
   }
   //应用混合.button()到#header a
   #header a {
     color: orange;
     #bundle.button();//#bundle > .button()、#bundle .inner()是等价的 
   }

作用域

• 概念：局部修改样式。先从本地查找变量或者混合模块，如果没有找到的话就会去父级作用域中查找，直至找到为止 eg:

    @var: red;
    #page{
        #header{
          color: @var; // white
        }
        @var: white;
    }

导入

eg:

  @import "library"; // library.less
  @import "typo.css";