less的使用
1洪规、npm i less --save-dev 把less源碼安裝到開發(fā)環(huán)境
/* less文件是通過less.loader.js 來編譯成css最后加載到頁面中的 */
2何暮、npm i less-loader@6 --save-dev 安裝less解析器 （★一定要指定版本）
3、lessc -v 查看版本 如果版本號顯示不出來 npm i less -g 全局安裝一下less
4赴恨、在main.js? import less from 'less'? Vue.use(less)? 作用：在所有頁面都可以使用less預(yù)編譯css語言
5、獨立的vue文件需要引入less <style lang="less"></style>
引入less的兩種形式
第一種方式 使用導(dǎo)入式 引入樣式庫
<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里面必須要使用引號(單雙引號都可以)
多層嵌套+變量計算；
寫減法的時候左右要加空格苹威，否則會理解為杠-
<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>
定義一個函數(shù)毅贮；
.test(@color:red,@size:14px){
? ? background: @color;
? ? font-size:@size;
}
.box1{
//? 不傳參办悟，使用默認(rèn)的；
? ? .test()
}
.box2{
//? 給函數(shù)傳參滩褥；
? ? .test(@color:green,@size:30px)
}
