vue3使用less入门使用案例（webStrom）

简介

less：css预处理语言

安装

npm i less@3.0.4 -D

less打包解释器

npm i less-loader@5.0.0 -D

less基础代码

<template>
  <div class="a"></div>
</template>

<style lang="less">
@lshColor: red;

.a {
  width: 500px;
  height: 500px;
  background-color: @lshColor;
}
</style>

效果

less进阶代码

<template>
  <div class="container">
    <header></header>
    <section></section>
    <footer></footer>
  </div>

</template>

<style lang="less">
//变量
//嵌套
//伪类
//伪元素
//媒体查询
@GuiguiColor: red;
@GuiguiWidth:600px;

.container {
  width:@GuiguiWidth;
  height: 500px;
  background-color: @GuiguiColor;
  header{
    height:100px;
    background: #345;
  }

  section{
    height: 400px;
    background: #456;
    &:hover{
      background: #596;
    }

    &::before{
      content: '我是谁';
      position: absolute;
      width: 100px;
      height: 100px;
      background: #c1d8ef;
    }

    @media screen and (max-width: 500px){
      background: #901;
    }
  }

  footer{
    height: 100px;
    background-color: #435446;
  }
}
</style>

效果