JS中Less常用的方法小结

1. Less和CSS变量

我们都知道，CSS中 var() 函数是用来引用自定义变量的。在Less中，我们可以使用和CSS类似的方式来定义和使用变量。下面是Less的变量定义示例：

@base-color: #666;

body {
  color: @base-color;
  background-color: lighten(@base-color, 30%);
}

在上面的示例中，我们可以看到 Less 以 @ 字符开头表示变量标识符。@base-color 变量定义在 Less 样式文件的最顶层，我们可以在后续的样式中引用它。

当然，在此基础上我们也可以继承变量：

@base-color: #666;

.footer {
  color: @base-color;
}

@media screen and (min-width: 768px) {
  .footer {
    color: darken(@base-color, 10%);
  }
}

在上述示例中，我们定义了一个变量 @base-color，然后使用它来为 .footer 设置了颜色。在媒体查询的情况下，我们使用 darken() 函数将 @base-color 变更为较暗的颜色。

2. Less函数

Less 在语法上和 CSS 语言相似，但它提供了丰富的函数功能，可以让我们更方便地管理样式。

2.1 颜色函数

Less 提供了一系列的内置颜色函数，可以在我们的样式文件中方便地调整颜色。例如：

@base-color: #666;

a {
  color: complement(@base-color); // 颜色取反
  background-color: lighten(@base-color, 30%); // 颜色变亮
}

在上述示例中，我们使用了 Less 颜色函数中的 complement() 函数和 lighten() 函数，可以直接对颜色做取反、变淡等操作。

2.2 字符串函数

在 Less 中，可以使用内置字符串函数来对字符串做操作，例如：

@base-url: "https://www.example.com";

a {
  background-image: url("@{base-url}/img/bg.jpg"); // 插值
  content: str-slice(@base-url, 8, -1); // 字符串的截取
}

在上述示例中，我们使用了 Less 字符串函数 str-slice() 和插值语法，可以对字符串做截取操作，并将暨值插入到样式中。

结语

上述仅是Less中常用方法的简单介绍，不同的场景会使用到更复杂难度的方法和函数，需要我们实际运用中去体会。