Less

概览

官网：http://lesscss.org

安装：

npm i less -D

只要安装了 less，即使没有使用构建工具，也可以通过 lessc 手动编译 less 文件。例如：

# 编译less文件为css文件，可指定输出文件名
npx lessc foo.less foo.css

# 编译less文件为css文件，并输出到控制台
npx lessc foo.less

变量声明

格式：@变量名: 值;

@test_width: 300px;

.box {
  width: @test_width;
}

导入

可以导入别的 less 文件，也可以导入 css 文件

@import 'reset.less';
@import 'base.css';

这样就可以使用在别的文件中定义的变量

混合(mixin)

可以混合嵌套使用别的样式

1、示例

.box1 {
}

.box2 {
  .box1;
  height: 100px;
}

.box1; 可以写成 .box1();

2、可以传递参数：

.box3(@test_ml) {
  margin-left: @test_ml;
}
// 传参
.box2 {
  .box3(10px);
}

3、传参可以设置默认值：

.box3(@test_ml: 20px) {
  margin-left: @test_ml;
}

.box2 {
  .box3(); // 需要修改默认值可传参 .box3(30px)
}

4、仍然能添加!important

.box2 {
  .box3(10px) !important;
}

运算

可进行 + - * / 运算，数值可以不带单位

@test_1: 300px;

.box4 {
  width: @test_1 + 10;
  height: (@test_1 - 250) * 2;
}

@arguments

包含了所有传递进来的参数

.border_1(@w: 1px, @s: solid, @c: #f00) {
  // 不用写成 border: @w @s @c;
  border: @arguments;
}

避免编译

加上 ~ 波浪号

.test_2 {
  width: ~'calc(300px - 100px)';
}

匹配模式

例如画小三角

/*箭头朝上*/
.triangle(top, @w: 10px, @c: #f00) {
  border-width: @w;
  border-style: dashed dashed solid dashed;
  border-color: transparent transparent @c transparent;
}
/*箭头朝下*/
.triangle(bottom, @w: 10px, @c: #f00) {
  border-width: @w;
  border-style: solid dashed dashed dashed;
  border-color: @c transparent transparent transparent;
}
/*箭头朝左*/
.triangle(left, @w: 10px, @c: #f00) {
  border-width: @w;
  border-style: dashed solid dashed dashed;
  border-color: transparent @c transparent transparent;
}
/*箭头朝右*/
.triangle(right, @w: 10px, @c: #f00) {
  border-width: @w;
  border-style: dashed dashed dashed solid;
  border-color: transparent transparent transparent @c;
}

注意：不管匹配到哪一个，都会有固定的@_，相当于公共部分，后面的默认参数还要带上

.triangle(@_, @w: 10px, @c: #f00) {
  width: 0;
  height: 0;
  overflow: hidden;
}

使用：

.triangle;

再来一个定位的例子：

.pos(r) {
  position: relative;
}
.pos(a) {
  position: absolute;
}
.pos(f) {
  position: fixed;
}
// 需要定位的盒子
.pos-box {
  .pos(r);
}

嵌套规则

<ul>
  <li>
    <a href="#"><span>1</span></a>
  </li>
  <li>
    <a href="#"><span>2</span></a>
  </li>
  <li>
    <a href="#"><span>3</span></a>
  </li>
</ul>

使用 less 嵌套的写法

/*
常规写法就是：
ul {}
ul li {}
ul li span {}
*/

ul {
  list-style: none;
  li {
    height: 100px;
  }
  a {
    text-decoration: none;

    // & 表示上一层选择器
    &:hover {
      color: #0f0;
    }

    span {
      font-size: 16px;
    }
  }
}

vscode 配置 less

首先安装Easy LESS插件，然后在项目下找.vscode文件夹，若没有自己新建一个，或者在该插件的配置项中选择Workspace，点击Edit in settings.json自动生成。

在 settings.json 里添加如下代码：

"less.compile": {
    "out": "${workspaceRoot}\\css\\"
}

${workspaceRoot}表示根目录，上述配置表示将 less 编译后的 css 放入根目录下的 css 文件夹中， 保存 less 文件后会自动生成同名的 css 文件，之后只需编辑 less 文件即可。

在 html 中引入的仍然是 css 文件,不用引入 less

先在 less 文件开头写 @charset 'utf-8'; 之后正常编辑