Less入门

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

---

一、Less是什么？

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。这里呈现的是 Less 的官方文档（中文版），包含了 Less 语言以及利用 JavaScript 开发的用于将 Less 样式转换成 CSS 样式的 Less.js 工具。

二、使用步骤

1.安装

如下（示例）：
通过 npm 安装

	npm install less -g

如果你不想将编译器安装到全局环境

npm i less --save-dev

2.使用

在style标签上加lang=“less”

<style lang="less"></style>

三、less的特点

1.less可用用@关键字来定义变量

@color:red
h1{color:@color}

2.嵌套

ul{
  color:red;
   li{
    line-height:48px
     a{
        text_decoration:none
        &:{color:#f70}
      }
   }
}

3.运算

@w:10;
.s1{padding:@w*2}
.s2{psdding:@w+10px}

4.转义

<style lang="less">
.flex() {
  display: flex;
  flex-wrap: wrap;
}
@w: 20px;
@color: rgb(230, 84, 108);
@bg:rgb(19, 224, 214);
@str:~ '.lessbox .testbox span';
@b:~ '1px solid';
@{str}{
  color: @bg;
  border: @b@bg;
}
.testbox {
  .flex();
  span {
    background-color: @color;
    margin: 5px;
  }
  .s1 {
    padding: 0 @w;
  }
  .s2 {
    padding: 0 @w+10;
  }
  .s3 {
    padding: 0 @w*3;
  }
}
</style>

5.内置函数

<style lang="less">
.flex() {
  display: flex;
  flex-wrap: wrap;
}
@w: 20px;
@bg: rgb(19, 224, 214);
.testbox {
  .flex();
  span {
    color: @bg;
    margin: 5px;
  }
  .s1 {
    padding: 0 @w;
    background-color: lighten(@bg, 20%);
  }
  .s2 {
    padding: 0 @w+10;
    background-color: lighten(@bg, 30%);
  }
  .s3 {
    padding: 0 @w*3;
    background-color: lighten(@bg, 40%);
  }
}
</style>

6.引用与映射

.border(){
  border:1px solid red;
  padding:20px;
}
.text{
  .border();
}
.text{
  border:border[border];
  padding:border[padding]
}

7.作用域

<style lang="less">
.flex() {
  display: flex;
  flex-wrap: wrap;
}
@w: 20px;
@bg: rgb(19, 224, 214);
.testbox {
  .flex();
  span {
    color: @bg;
    margin: 5px;
  }
  .s1 {
    padding: 0 @w;
    background-color: lighten(@bg, 20%);
  }
  .s2 {
    @bg: rgb(142, 38, 226);
    padding: 0 @w+10;
    background-color: lighten(@bg, 30%);
  }
  .s3 {
    padding: 0 @w*3;
    background-color: lighten(@bg, 40%);
  }
}

8.注释

//会隐藏
/css注释 不会隐藏/

9.导入

@import 'xxx.less';
@import 'xxx.css'