首頁  >  文章  >  web前端  >  less簡單實用的案例

less簡單實用的案例

php中世界最好的语言
php中世界最好的语言原創
2018-03-12 16:26:201506瀏覽

這次帶給大家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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn