var()

var()函数可以代替元素中任何属性中的值的任何部分。var()函数不能作为属性名、选择器或者其他除了属性值之外的值。（这样做通常会产生无效的语法或者一个没有关联到变量的值。）

:root

:root是一个伪类，表示文档根元素，非IE及ie8及以上浏览器都支持，在:root中声明相当于全局属性，只要当前页面引用了:root segment所在文件，都可以使用var()来引用

:root {
  --main-bg-color: pink;
}

body {
  background-color: var(--main-bg-color);
}

文件别名

别名：“@”和“~”的使用

在build文件夹下的webpack.base.conf.js文件中设置src的路径别名。

    resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      '#': resolve('src/assets')
    }
  },

使用方法:

使用别名一般就三种情况：在js中用，在css中用，在html文档内用
js中用，最简单:

import {getName} from '@/util/name'

css中使用，需要加入“~”，并且不要写成字符串：

{
    background: url(~@/assets/img/04_2.jpg);//正确
    background: url('~@/assets/img/04_2.jpg');//错了
}

html中使用，可以加入‘_{’也可以不加入‘}’。

 <img class="pic-404__child left" src="@/assets/404_images/404_cloud.png" alt="404">

注意：生产包遇到路径问题
相信你看到这里，也曾经无数次npm run build，在很多问题中就是因为路径出现问题。
共享一个碰到的坑：
在config/index.js内可以设置打包后根目录，例如：

build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/foreEnd/',//设置资源访问时前缀，当设置后，例如图片，css，js等文件的路径就会变为/foreEnd/……的绝对路径，你可以设置为‘./’保持相对路径。

css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        // 这样就能全局使用 src/assets/styles/base.less 定义的 变量
        additionalData:  `@import "${path.resolve(__dirname, 'src/assets/styles/base.less')}";`
      }
    }
  }