less

1.less支持普通css所有语法

 

2.在.vue文件中使用less：

<style scoped lang="less">
  @textcolor :#2c3e50;

  #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: @textcolor;
  margin-top: 60px;
}


</style>

 

3.引入外部less:

global.less:

@color: red;

.test{
    background-color: @color;
}

main.js中引入：

import "./common/global.less"

也可以在其他.vue文件的script中引入

 

css是全局的,默认情况下，有一个js文件或vue文件引入一次，其他地方都有效

比如a.vue中引入了1.less，在b.vue中就不需要再引入了1.less了，1.less中的样式可以直接使用

所以css文件可以只在main.js文件中引入一次就可以了，比如bootstrap.css也是在main.js中引入一次

 

4.vue文件中style的scoped修饰可以让定义的css样式只在本vue文件中有效

 

5.在less中也可以引入其他less：

<style scoped lang="less">
@import './common/global.less';

@textcolor :#2c3e50;

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: @textcolor;
  margin-top: 60px;
}