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

简介

less：css预处理语言

安装

npm i [email protected] -D

less打包解释器

npm i [email protected] -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>

效果