基于vue使用less样式的写法

1.下载less@4版本，less-loader@7解释器

cnpm i -S less@4 less-loader@7

 组件集成样式集成：

样式预处理器：css -> sass -> less -> stylus -> postcss -> sss

UI设计语言：https://ant.design/docs/spec/introduce-cn

引入样式文件

@import 'common.less'

css与@import区别

从属关系区别：@import是css提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载CSS文件还可以定义RSS、rel连接属性等

加载顺序区别：加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载

兼容性区别：@import是CSS2.1才有的语法，故只可在IE5+才能识别；link标签作为HTML元素，不存在兼容性问题

DOM可控制性区别：可以通过JS操作DOM，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的方式插入样式

1.要有通用样式 --系统字体 

有全局页面通用配置（标签文件配置）

//主容器一定是包含了所有的控制，所以直接固定定位 就不会扩大扩小页面
.app-container{
  position:fixed;
  top:0;
  left:0;
  //使用方法
  .container();
  //width:100%;
 //height:100%;
  //使用在common中定义的变量
  background-color:@cf5;
  z-index:99;
}

 

<style lang="less" scoped>
@import "../../style/common.less";
.banner-img{
   display:block;
   height:210px;
   max-width:100%;
   margin:auto;
}
//定义一个方法，然后这个方法实现一个遍历
//定义数据长度
@len:13;
//定义一个递归方法实现遍历
//方法可以有默认值
//因为是递归，所以应该有条件，否则就是一个死循环
.loop(@index:1) when (@index <= @len){
   //在名字中或字符串中使用变量的时候，需要使用一个语法@{}
  &.icon-@{index}{
   //在路径中使用变量的时候，一定要加上""
   background-image:url("../../images/types/icon-@{index}.png");
}
.loop(@index + 1);
}
.main{  //可以设置一个dom高度进行滚动
  height:calc(100% - 49px)
 //当设置横向滚动为关闭的时候，不设置纵向，那么纵向就是自动滚动的
  overflow-x:hidden;
}

<style lang="less" scoped>
@import "../../style/common.less";
.banner-img{
   display:block;
   height:210px;
   max-width:100%;
   margin:auto;
}
//定义一个方法，然后这个方法实现一个遍历
//定义数据长度
@len:13;
//定义一个递归方法实现遍历
//方法可以有默认值
//因为是递归，所以应该有条件，否则就是一个死循环
.loop(@index:1) when (@index <= @len){
   //在名字中或字符串中使用变量的时候，需要使用一个语法@{}
  &.icon-@{index}{
   //在路径中使用变量的时候，一定要加上""
   background-image:url("../../images/types/icon-@{index}.png");
}
.loop(@index + 1);
}
.main{  //可以设置一个dom高度进行滚动
  height:calc(100% - 49px)
 //当设置横向滚动为关闭的时候，不设置纵向，那么纵向就是自动滚动的
  overflow-x:hidden;
}

<style lang="less" scoped>
@import "../../style/common.less";
.banner-img{
   display:block;
   height:210px;
   max-width:100%;
   margin:auto;
}
//定义一个方法，然后这个方法实现一个遍历
//定义数据长度
@len:13;
//定义一个递归方法实现遍历
//方法可以有默认值
//因为是递归，所以应该有条件，否则就是一个死循环
.loop(@index:1) when (@index <= @len){
   //在名字中或字符串中使用变量的时候，需要使用一个语法@{}
  &.icon-@{index}{
   //在路径中使用变量的时候，一定要加上""
   background-image:url("../../images/types/icon-@{index}.png");
}
.loop(@index + 1);
}
.main{  //可以设置一个dom高度进行滚动
  height:calc(100% - 49px)
 //当设置横向滚动为关闭的时候，不设置纵向，那么纵向就是自动滚动的
  overflow-x:hidden;
}