安装

1.安装nodejs。

2.运行

npm install -g less

 声明变量

1.必须有@为前缀

2.不能包含特殊字符

3.不能以数字开头

4.大小写敏感

// 定义一个粉色的变量
@color: pink;
@font14: 14px;
body {
    background-color: @color;
    div {
        color: @color;
        font-size: @font14;
    }
}

VsCode [ easy less ] 插件

安装完毕后，直接再less文件中保存即可生成对应css文件。

Less 嵌套

如果遇见（交集|伪类|伪元素选择器）

+ 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代；

+ 如果有 & 符号，它就被解析为父元素自身或父元素的伪类。

<template>
  <div class="hello">
    <a href="#">变色a>
    <a href="#">
      <p>哇哈哈哈p>
      <div>
        <p>不哇哈哈哈p>
      div>
    a>
  div>
template>
 
<style scoped lang="less">
a {
  color: #42b983;
  &:hover {
    color: gold;
  }
  &::before {
    content: "";
  }
  &>p {
    font-size: 28px;
  }
}
style>

Less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）减（-）乘（*）除（/）算数运算

1.运算符的左右两侧必须各敲一个空格隔开

2.两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准

3.两个数参与运算，如果2个数都有单位，而且单位不一样。最后结果以第一个单位为准

 

<style scoped lang="less">
@border: 5px + 5;
div {
  width: 200px - 50;
  // 两个单位，且不同，以第一个为准
  height: 100rem / 20px;
  border: @border solid red;
  background-color: #666 - #222;
}
style>