less--入门

Less(Learner Style Sheets)是向后兼容css扩展语言。

变量(Variables)

 @width: 10px;
 @height: @width + 10px;
 header{
     width: @width;
     height: @height;
 }

编译后等同于：

 header{
     width: 10px;
     height:20px;
 }

混合(Mixins)

 .bordered{
     border-top: 1px solid black;
     border-bottom: 1px solid black;
 }

 a{
     .bordered();
 }

嵌套(Nesting)

 #aa{
     color: black;
     #bb{
         font-size: 20px;
     }
     .cc{
         width: 300px;
     }
 }

#aa{
    color: black;
    #bb{
        font-size: 20px;
    }
    .cc{
        width: 300px;
        &:hover{
            height:300px;
        }
    }
}

适配屏幕(@supports、@media)

 .component {
     width: 300px;
     @media (min-width: 768px) {
         width: 600px;
         @media  (min-resolution: 192dpi) {
             background-image: url(/img/retina2x.png);
         }
     }
     @media (min-width: 1280px) {
         width: 800px;
     }
 }

运算（Operations）

 @color: #224488 / 2; //results in #112244

 @var: 50vh/2;
 width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

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

函数（Functions）

 #bundle() {
   .button {
     display: block;
     border: 1px solid black;
     background-color: grey;
     &:hover {
       background-color: white;
     }
   }
   .tab { ... }
   .citation { ... }
 }

 #header a {
   color: orange;
   #bundle.button();  // can also be written as #bundle > .button
 }

Maps

 #colors() {
   primary: blue;
   secondary: green;
 }

 .button {
   color: #colors[primary];
   border: 1px solid #colors[secondary];
 }

作用域(Scope)

 @var: red;

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

 @import "xx.css";