less--入门

Posted 2021-01-05 wujialin

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

变量(Variables)

1 @width: 10px;
2 @height: @width + 10px;
3 header{
4     width: @width;
5     height: @height;
6 }

编译后等同于：

1 header{
2     width: 10px;
3     height:20px;
4 }

混合(Mixins)

1 .bordered{
2     border-top: 1px solid black;
3     border-bottom: 1px solid black;
4 }
5 
6 a{
7     .bordered();
8 }

嵌套(Nesting)

1 #aa{
2     color: black;
3     #bb{
4         font-size: 20px;
5     }
6     .cc{
7         width: 300px;
8     }
9 }

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

适配屏幕(@supports、@media)

 1 .component {
 2     width: 300px;
 3     @media (min-width: 768px) {
 4         width: 600px;
 5         @media  (min-resolution: 192dpi) {
 6             background-image: url(/img/retina2x.png);
 7         }
 8     }
 9     @media (min-width: 1280px) {
10         width: 800px;
11     }
12 }

运算（Operations）

1 @color: #224488 / 2; //results in #112244
2 
3 @var: 50vh/2;
4 width: calc(50% + (@var - 20px));  // result is calc(50% + (25vh - 20px))

1 @min768: (min-width: 768px);
2 .element {
3   @media @min768 {
4     font-size: 1.2rem;
5   }
6 }

函数（Functions）

 1 #bundle() {
 2   .button {
 3     display: block;
 4     border: 1px solid black;
 5     background-color: grey;
 6     &:hover {
 7       background-color: white;
 8     }
 9   }
10   .tab { ... }
11   .citation { ... }
12 }

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

Maps

1 #colors() {
2   primary: blue;
3   secondary: green;
4 }
5 
6 .button {
7   color: #colors[primary];
8   border: 1px solid #colors[secondary];
9 }

作用域(Scope)

1 @var: red;
2 
3 #page {
4   #header {
5     color: @var; // white
6   }
7   @var: white;
8 }

1 @import "xx.css";