less的使用
1、npm i less --save-dev 把less源碼安裝到開(kāi)發(fā)環(huán)境
/* less文件是通過(guò)less.loader.js 來(lái)編譯成css最后加載到頁(yè)面中的 */
2、npm i less-loader@6 --save-dev 安裝less解析器 （★一定要指定版本）
3、lessc -v 查看版本 如果版本號(hào)顯示不出來(lái) npm i less -g 全局安裝一下less
4、在main.js? import less from 'less'? Vue.use(less)? 作用：在所有頁(yè)面都可以使用less預(yù)編譯css語(yǔ)言
5、獨(dú)立的vue文件需要引入less <style lang="less"></style>
引入less的兩種形式
第一種方式 使用導(dǎo)入式 引入樣式庫(kù)
<style scoped lang="less">
@import url(./less/common.less);
</style>
第二種引入方式 在script中導(dǎo)入樣式
import './less/common.less'
less中變量的使用 定義方式：
@key:value; 使用方式：@key;
字符串拼接變量使用方式?
@img:'./img/';?
background:url("@{img}1.png") url里面必須要使用引號(hào)(單雙引號(hào)都可以)
多層嵌套+變量計(jì)算；
寫減法的時(shí)候左右要加空格，否則會(huì)理解為杠-
<div class="box1">
? ? <div class="box2">
? ? ? ? <div class="box3"></div>
? ? </div>
</div>
<style lang="less">
@k:100px;
.box1{
? ?? width: @k*2;
? ?? height:@k*2;
? ?? background: red;
? ?? .box2{
? ? ? ?? width: @k - 5px;
? ? ? ?? height:@k + 5px;
? ? ? ?? background: green;
? ? ? ?? .box3{
? ? ? ? ? ?? width: @k/2;
? ? ? ? ? ?? height:@k/2;
? ? ? ? ? ?? background: blue;
? ? ? ?? }
? ?? }
}
</style>
定義一個(gè)函數(shù)；
.test(@color:red,@size:14px){
? ? background: @color;
? ? font-size:@size;
}
.box1{
//? 不傳參，使用默認(rèn)的；
? ? .test()
}
.box2{
//? 給函數(shù)傳參；
? ? .test(@color:green,@size:30px)
}
