less--入门

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

变量(Variables)

@ 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) {
         600px;
        @media  (min-resolution: 192dpi) {
            background-image: url(/img/retina2x.png);
        }
    }
    @media (min- 1280px) {
        width: 800px;
    }
}

运算（Operations）

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

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

@min768: (min- 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";