Vue中使用less

1.Vue中安装Less

安装

// 安装好vue脚手架以后
npm install less less-loader

main.js

import less from 'less'
Vue.use(less)

备注：一般会出现报错，如：

原因：less-loader版本过高

解决办法：

npm uninstall less-loader
npm install less-loader@4.1.0

2.使用

手册：https://less.bootcss.com/#%E6%A6%82%E8%A7%88

概念

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

内容

变量

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

混合

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

.post a {
  color: red;
  .bordered();
}

嵌套

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

伪选择器（pseudo-selectors）与混合（mixins）一同使用

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

@media @ 规则会被放在前面，同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡（bubbling）

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
  @media (min-width: 1280px) {
    width: 800px;
  }
}

运算

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

calc()

为了与 CSS 保持兼容，calc() 并不对数学表达式进行计算

转义

允许使用任意字符串作为属性或变量值

@min768: ~"(min-width: 768px)";
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

从 Less 3.5 开始，可以简写为

@min768: (min-width: 768px);
.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

函数

参见：函数手册

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
  .tab { ... }
  .citation { ... }
}

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

映射

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

作用域

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

注释

/* 一个块注释
 * style comment! */
@var: red;

// 这一行被注释掉了！
@var: white;

导入

@import "library"; // library.less
@import "typo.css";