less簡單實用的案例

這次帶給大家less簡單實用的案列，使用less的注意事項有哪些，以下就是實戰案例，一起來看一下。

//这里是一些简单的LESS语法@width:400px;@height:300px;@font_size:12px;@bgColor: #000;textarea {
    width:@width;
    height:@height;
    
font-size
:@font_size;
    
background-color
: @bgColor;
}
.frame {
    .fun(123px);
    background-color: @bgColor;
    .select {
    width: 100px
  }
}
.fun(@px) {
  height: @px
}

編譯成 CSS 後的程式碼為

textarea {  width: 400px;  height: 300px;  font-size: 12px;  background-color: #000000;
}.frame {  height: 123px;  background-color: #000000;
}.frame .select {  width: 100px;
}

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

Rxjs的使用詳解

js-xlsx的工具類別庫xlsxUtils的使用詳解

javascript怎麼會做出決策樹

以上是less簡單實用的案例的詳細內容。更多資訊請關注PHP中文網其他相關文章！