Vue使用less

最新推荐文章于 2025-06-14 15:03:11 发布

原创最新推荐文章于 2025-06-14 15:03:11 发布 · 5.6k 阅读

4 ·

CC 4.0 BY-SA版权

在建好的vue项目中：

第一步：

安装less依赖，npm install less less-loader --save

第二步：

修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加

{

test: /\.less$/,

loader: "style-loader!css-loader!less-loader",

},

现在基本上已经安装完成了，然后在使用的时候在style标签里加上lang=”less”里面就可以写less的代码了(style标签里加上 scoped 为只在此作用域有效)

<stylelang="less"scoped>
@nice-blue: 
#5B83AD;
@light-blue:@nice-blue +#111;
.header{
        background:@light-blue;
}
</style>

例子：（上传格式会乱请自行格式化代码）

<divclass="box"></div>

@ly_width:100px;//自定义宽
@ly_height:100px;//自定义高
.border-radius (@radius:50%) {//简单的圆角
-webkit-border-radius: 
@radius;
-moz-border-radius: 
@radius;
border-radius: 
@radius;
}

.box-shadow (@x:0px,@y:3px,
@blur:5px, 
@alpha:0.5) {//方块阴影 Box Shadow
-webkit-box-shadow: 
@x @y @blurrgba(0,0,0, @alpha);
-moz-box-shadow: 
@x @y @blurrgba(0,0,0, @alpha);
box-shadow: @x@y@blurrgba(0,0,0,
 @alpha);
}

.transition (@prop:all,@time:1s,@ease:
linear) {//元素过渡效果 Transition
-webkit-transition: 
@prop @time 
@ease;
-moz-transition: 
@prop @time 
@ease;
-o-transition: 
@prop @time 
@ease;
-ms-transition: 
@prop @time 
@ease;
transition: @prop@time@ease;
}
.transform (@rotate:90deg,@scale:1,@skew:
1deg,@translate:
10px) {//转换/旋转 Transform
-webkit-transform: 
rotate(@rotate) scale(@scale) 
skew(@skew) translate(@translate);
-moz-transform: 
rotate(@rotate) scale(@scale) 
skew(@skew) translate(@translate);
-o-transform: 
rotate(@rotate) scale(@scale) 
skew(@skew) translate(@translate);
-ms-transform: 
rotate(@rotate) scale(@scale) 
skew(@skew) translate(@translate);
transform: rotate(@rotate)scale(@scale)skew(@skew)translate(@translate);
}
.gradient (@origin:left,@start:#ffffff,@stop:#000000)
 {//线性渐变 
background-color: 
@start;
background-image: -webkit-linear-gradient(@origin,@start,@stop);
background-image: -moz-linear-gradient(@origin,@start,@stop);
background-image: -o-linear-gradient(@origin,@start,@stop);
background-image: -ms-linear-gradient(@origin,@start,@stop);
background-image: 
linear-gradient(@origin, @start, @stop);
}

.box{
width:@ly_width;
height:@ly_height;
background:@nice-red;
.border-radius(50%);//简单的圆角
.box-shadow(5px,5px,6px,0.3);//方块阴影 Box Shadow
.transition(all,0.5s,ease-in);//元素过渡效果 Transition
.transform(5deg,0.5,1deg,0px);//转换/旋转 Transform
.gradient(left,#663333,#333333);//线性渐变
}
.box:hover {
     opacity: 
0;
}