首页  >  文章  >  web前端  >  vue.js怎么能使用less

vue.js怎么能使用less

coldplay.xixi
coldplay.xixi原创
2020-11-10 14:58:051853浏览

vue.js能使用less的方法:1、在less,允许我们使用以变量的形式来定义,定义方式【@k:v;】使用方式【@k】;2、字符串拼接变量。

vue.js怎么能使用less

本教程操作环境:windows10系统、vue2.5.2,本文适用于所有品牌的电脑。

【相关文章推荐:vue.js

vue.js能使用less的方法:

依赖下载

1、首先使用npm下载依赖;

npm install --save less less-loader

2、安装完成后检查是否安装成功;

lessc -v

3、如果安装成功后,会显示安装成功后的版本;

e5873aa4fb783d140becef1a39bc098.png

引用方法

1、在main.js

import less from 'less'
Vue.use(less)

2、然后创建一个.vue文件我们开始玩耍了;

注意:独立的vue文件需要引入less

c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927

开始使用

1、less中变量的使用;

在less,允许我们使用以变量的形式来定义,定义方式:@k:v; 使用方式:@k;

<div></div>
 
<style>
@color:red;
@k:100px;
.box{
width:@k;
height:@k;
background: @color;
}
</style>

此时就会有一个宽100px,高100px,背景红色的正方形显示在页面上了;

cdd74294ec6388f326b08cadffa7b29.png

2、字符串拼接变量使用方式;

<div></div>
 
<style scoped>
@img:&#39;./img/&#39;;
@k:100px;
.box1{
    width:@k;
    height:@k;
    background:url("@{img}1.png")
}
</style>

注意:路径需要用""包裹,@{img}这种凡是把变量引进来才能生效;

4b255dffc74754f048860d58d54a32d.png

3、多层嵌套+变量计算;

<div>
    <div>
        <div></div>
    </div>
</div>
 
<style>
@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结构;除了嵌套使用,有没有发现他的计算才是真正强大的地方呢?

645d628bbf2bb542c057518a52a0fb8.png

4、混合 = 函数

<div>我是box1</div>
<div>我是box2</div>
 
<style>
//定义一个函数;
.test(@color:red,@size:14px){
    background: @color;
    font-size:@size;
}
.box1{
//  不传参,使用默认的;
    .test()
}
.box2{
//  给函数传参;
    .test(@color:green,@size:30px)
}
</style>

59a5ee360e39d75c6928918f2b62a7c.png

相关免费学习推荐:JavaScript(视频)

以上是vue.js怎么能使用less的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn