最近發現好多小伙伴在面試的過程中會問到vue如何使用less和scss，所以我絕對更新、復習一下less；廢話不多說直接進主題；
依賴下載
1、首先使用npm下載依賴；
npm install --save less less-loader
2、安裝完成后檢查是否安裝成功；
lessc -v
3、如果安裝成功后，會顯示安裝成功后的版本；
引用方法
1、在main.js
import less from 'less' Vue.use(less)
2、然后創建一個.vue文件我們開始玩耍了；
注意：獨立的vue文件需要引入less
<style lang="less"></style>
開始使用
1、less中變量的使用；
在less，允許我們使用以變量的形式來定義，定義方式：@k:v; 使用方式：@k;
<div class="box"></div>
<style lang="less">
@color:red;
@k:100px;
.box{
width:@k;
height:@k;
background: @color;
}
</style>
此時就會有一個寬100px,高100px，背景紅色的正方形顯示在頁面上了;
2、字符串拼接變量使用方式；
<div class="box1"></div>
<style lang="less" scoped>
@img:'./img/';
@k:100px;
.box1{
width:@k;
height:@k;
background:url("@{img}1.png")
}
</style>
注意：路徑需要用""包裹，@{img}這種凡是把變量引進來才能生效；
3、多層嵌套+變量計算；
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
<style lang="less">
@k:100px;
.box1{
width: @k;
height:@k;
background: red;
.box2{
width: @k/2;
height:@k/2;
background: green;
.box3{
width: @k/3;
height:@k/3;
background: blue;
}
}
}
</style>
可以看到，less可以嵌套使用，讓我們一次就可以看清楚css結構；除了嵌套使用，有沒有發現他的計算才是真正強大的地方呢？
4、混合 = 函數
<div class="box1">我是box1</div>
<div class="box2">我是box2</div>
<style lang="less">
//定義一個函數；
.test(@color:red,@size:14px){
background: @color;
font-size:@size;
}
.box1{
// 不傳參，使用默認的；
.test()
}
.box2{
// 給函數傳參；
.test(@color:green,@size:30px)
}
</style>
5、匹配模式
<div class="box"></div>
//定義的css
<style lang="less">
.sjx(@_,@color,@size){
width: 0;
height:0;
border:@size solid @color;
border-color:transparent;
}
//左邊三角形
.sjx(l,@color,@size){
border-left-color:@color;
}
//上邊三角形
.sjx(t,@color,@size){
border-top-color:@color;
}
//右邊三角形
.sjx(r,@color,@size){
border-right-color:@color;
}
//左邊三角形
.sjx(b,@color,@size){
border-bottom-color:@color;
}
//這里匹配調用
.box{
.sjx(r,red,20px)
}
</style>
box匹配的是t(top),也就是上
box匹配b(buttom)，就是下；
總結一下匹配模式就好比是js中的switch語句,輸入的是什么就顯示什么；不過感覺么啥用；
7、顏色函數
<p>默認紅色</p>
<p>默認綠色</p>
<ul>
<li <li v-for="i in 6">測試</li>
</ul>
<span>混合</span>
<style lang="less" scoped>
*{
padding: 0;
margin: 0;
}
@color:red;
@color1:green;
p:nth-child(1){
background: @color;
};
p:nth-child(2){
background: @color1;
};
ul{
list-style: none;
li:nth-child(1){
background:lighten(@color,50%);
}
li:nth-child(2){
background:darken(@color,50%);
}
li:nth-child(3){
background:saturate(@color,50%);
}
li:nth-child(4){
background:desaturate(@color,50%);
}
li:nth-child(5){
background:spin(@color,50%);
}
li:nth-child(6){
background:spin(@color,50%);
}
}
span{
background: mix(@color,@color1);
}
</style>
8、運算符
可以對高度、寬度、角度進行計算；
<ul>
<li v-for="item in 4">{{item}}</li>
</ul>
<style lang="less" scoped>
@k:10px;
ul{
list-style: none;
li{
border:1px solid ;
margin:10px 0 ;
}
li:nth-child(1){
width: @k + @k;
height:@k;
}
li:nth-child(2){
width: @k -5px;
height:@k;
}
li:nth-child(3){
width: @k * @k;
height:@k;
}
li:nth-child(4){
width: @k / 2;;
height:@k;
}
}
</style>
如果覺得不錯請點點手指，關注下我們公眾號，我將會長期為您分享前端基礎知識點；
