Vue使用less

在建好的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 
   @blur 
   rgba( 
   0, 
   0, 
   0, @ 
   alpha); 
  
 
   -moz-box-shadow: 
    @x 
   @y 
   @blur 
   rgba( 
   0, 
   0, 
   0, @ 
   alpha); 
  
 
   box-shadow: 
   @x 
   @y 
   @blur 
   rgba( 
   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; 
  

    } 
  

猜你喜欢