less的簡介
- less是一門css的預(yù)處理器語言
- less是一個css 的增強(qiáng)版，通過less可以編寫更少的代碼實現(xiàn)更強(qiáng)大的樣式
- 在less中添加了許多的新特性，像對變量的支持，對mixin的支持... ...
- less的語法大體上和css語法一致，但是less中添加了許多對css的擴(kuò)展
- 所以瀏覽器無法直接執(zhí)行l(wèi)ess代碼，要執(zhí)行必須先將less轉(zhuǎn)換為css，然后再由瀏覽器執(zhí)行
css中的變量和函數(shù)
<style>
html {
/*css原生也支持變量的設(shè)置*/
--color: #ff0;
--length: 100px;
}
.box1 {
/*calc()計算函數(shù)*/
width: calc(1000px/2);
height: var(--length);
background-color: var(--color);
}
.box2 {
width: var(--length);
height: var(--length);
color: var(--color);
}
.box3 {
width: var(--length);
height: var(--length);
border: 10px solid var(--color);
}
</style>
<body>
<div class="box1">aaa</div>
<div class="box2">aaa</div>
<div class="box3">aaa</div>
</body>
css原生也支持變量和函數(shù)，由于是比較新的特性，所以對于低版本的瀏覽器兼容性不好
less初體驗
語法
body{
width:100px;
height:100px;
div{
color:red;
}
}
編譯后的css文件
body {
width: 100px;
height: 100px;
}
body div {
color: red;
}
less語法
less的配置
"less.compile": {
"compress": false, // remove surplus whitespace(刪除多余的空白,也就是是否壓縮)
"sourceMap": true, // generate source maps (.css.map files)，生成源映射，用來調(diào)試（生成的css代碼對應(yīng)less代碼的位置）
"out": true, // 是否生成css文件
}
