Less常用语法

发表于 | 分类于
Less常用语法

与Sass对比

Less 和 Sass 都是流行的 CSS 预处理器，它们各自有不同的优点。

相对于 Sass，Less 有以下几个优点：

  1. 更简单的语法：Less 的语法相对简单和直观，这使得学习曲线较平缓。对于新手开发者，Less 可能更容易上手。
  2. 动态变量：Less 允许在定义变量时使用动态计算，这意味着你可以进行基本的数学运算来生成变量值，而 Sass 在这方面有一些限制。
  3. 函数库：Less 提供了一些实用的函数，如颜色操作函数，这些函数在使用时比较简单直接，通常不需要额外的插件。
  4. 简单的继承机制：Less 提供了一个简化的继承机制，允许你通过 extend 来复用样式，相对比较直接。
  5. 内置的 Mixins：Less 的 Mixins 使用较为简单，不需要使用 @include 或 @extend 等复杂语法。直接使用 . 前缀的 Mixins 可以让代码更简洁。

当然，选择 Less 或 Sass 最终还是取决于你的具体需求和个人喜好。

Sass 也有它独特的优势，比如更多的功能、更强大的模块化系统和更广泛的社区支持。

对于我来说

两者都满足开发需求，Less使用起来更便捷，我选择Less。

另外iView和Ant Design Vue也都是使用的Less。

Element Plus使用的是Sass。

uni-app使用的是Sass。

测试的时候可以使用VSCode安装一个Easy LESS插件

image-20240802093825539

只要我们的Less文件保存就会在同一目录生成对应的css文件，不用的时候禁用就行。

导入

导入

1
@import "blue-theme.less";

变量

基本

1
2
3
4
5
6
7
@nav-color: #F90;

nav {
  @width: 100px;
  width: @width;
  color: @nav-color;
}

编译后

1
2
3
4
nav {
  width: 100px;
  color: #F90;
}

字符串中变量

示例1

1
2
3
4
5
// Variables
@themes: "../../src/themes";

// Usage
@import "@{themes}/tidal-wave.less";

示例2

1
2
3
4
5
6
7
8
// Variables
@images: "../img";

// Usage
body {
  color: #444;
  background: url("@{images}/white-sand.png");
}

嵌套

1
2
3
4
5
6
7
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

编译后

1
2
3
4
5
6
7
8
9
#content article h1 {
  color: #333;
}
#content article p {
  margin-bottom: 1.4em;
}
#content aside {
  background-color: #EEE;
}

选择器

父选择器的标识符&

1
2
3
4
article a {
  color: blue;
  &:hover { color: red }
}

编译后

1
2
3
4
5
6
article a {
  color: blue;
}
article a:hover {
  color: red;
}

混合器

无参mixin

示例1

1
2
3
4
5
6
7
8
9
.base {
  color: red;
  font-size: 14px;
}

.button {
  .base();
  padding: 10px;
}

编译后

1
2
3
4
5
6
7
8
9
.base {
  color: red;
  font-size: 14px;
}
.button {
  color: red;
  font-size: 14px;
  padding: 10px;
}

无参 mixin 的样式括号可以省略。

1
2
3
4
5
6
7
8
9
.base {
  color: red;
  font-size: 14px;
}

.button {
  .base;  // 无需使用圆括号
  padding: 10px;
}

如果混合器不输出到CSS中

1
2
3
4
5
6
7
8
9
.base() {
  color: red;
  font-size: 14px;
}

.button {
  .base;  // 无需使用圆括号
  padding: 10px;
}

混合器传参

基本

1
2
3
4
5
6
7
8
9
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.button {
  .border-radius(6px);
}

默认值

1
2
3
4
5
6
7
8
9
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.button {
  .border-radius();
}

当然也可以省去括号

1
2
3
4
5
6
7
8
9
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.button {
  .border-radius;
}

多态

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.mixin(@color) {
  color: @color;
}

.mixin(@color, @padding: 2) {
  background-color: @color;
  padding: @padding;
}

.mixin(@color, @padding, @margin: 2) {
  color: @color;
  padding: @padding;
  margin: @margin @margin @margin @margin;
}

.some .selector div {
  .mixin(#008000);
}

结果

1
2
3
4
5
.some .selector div {
  color: #008000;
  background-color: #008000;
  padding: 2;
}

多个满足条件会取后者。

继承

使用&:extend(选择器)进行样式继承。

相比于混合器，继承生成的CSS会更小。

基本示例

1
2
3
4
5
6
7
8
9
.z_base {
  color: red;
  font-size: 14px;
}

.z_button {
  &:extend(.z_base);
  padding: 10px;
}

生成的样式

1
2
3
4
5
6
7
8
.z_base,
.z_button {
  color: red;
  font-size: 14px;
}
.z_button {
  padding: 10px;
}

继承范围

只继承指定样式

less

1
2
3
4
5
6
7
8
9
10
11
.a {
  font-size: 18px;

  .son {
    background-color: aqua;
  }
}

.c {
  &:extend(.a);
}

生成

1
2
3
4
5
6
7
.a,
.c {
  font-size: 18px;
}
.a .son {
  background-color: aqua;
}

继承指定及其子样式

less

1
2
3
4
5
6
7
8
9
10
11
.a {
  font-size: 18px;

  .son {
    background-color: aqua;
  }
}

.c {
  &:extend(.a all);
}

生成

1
2
3
4
5
6
7
8
.a,
.c {
  font-size: 18px;
}
.a .son,
.c .son {
  background-color: aqua;
}

内置函数

https://less.bootcss.com/functions/#less-%E5%87%BD%E6%95%B0

颜色加深

1
2
3
4
5
6
7
8
9
10
11
12
// Variables
@link-color: #FA7E31; // sea blue
@link-color-hover: darken(@link-color, 10%);

// Usage
a {
  color: @link-color;
}

a:hover {
  color: @link-color-hover;
}

生成的样式

1
2
3
4
5
6
a {
  color: #FA7E31;
}
a:hover {
  color: #f26006;
}

颜色变浅

1
2
3
4
5
6
7
8
9
10
11
12
// Variables
@link-color: #FA7E31; // sea blue
@link-color-hover: lighten(@link-color, 10%);

// Usage
a {
  color: @link-color;
}

a:hover {
  color: @link-color-hover;
}

生成的样式

1
2
3
4
5
6
a {
  color: #FA7E31;
}
a:hover {
  color: #fb9d63;
}

运算符

基本示例

1
2
3
4
5
6
7
a {
  font-size: 16px + 2;
}

a:hover {
  font-size: 16px * 1.2;
}

生成后的

1
2
3
4
5
6
a {
  font-size: 18px;
}
a:hover {
  font-size: 19.2px;
}

主要运算符

LESS 支持多种运算符，用于在样式表中进行计算和动态生成值。

以下是 LESS 中支持的主要运算符：

加法（+）：

1
2
3
4
5
@width: 100px;
@padding: 20px;
.box {
  width: @width + @padding; // 120px
}

减法（-）：

1
2
3
4
5
@width: 100px;
@margin: 10px;
.box {
  width: @width - @margin; // 90px
}

乘法（*）：

1
2
3
4
5
@width: 100px;
@scale: 2;
.box {
  width: @width * @scale; // 200px
}

除法（/）：

1
2
3
4
5
@width: 200px;
@parts: 4;
.box {
  width: @width / @parts; // 50px
}

取余（%）：

1
2
3
4
5
@width: 100px;
@modulus: 3;
.box {
  width: @width % @modulus; // 1px
}

比较运算符：

  • 等于（=）：@a = @b
  • 不等于（!=）：@a != @b
  • 大于（>）：@a > @b
  • 小于（<）：@a < @b
  • 大于等于（>=）：@a >= @b
  • 小于等于（<=）：@a <= @b

这些比较运算符可以在条件语句中使用，例如：

1
2
3
4
@color: red;
.box {
  color: if(@color = red, blue, green);
}

逻辑运算符：

  • 与（and）：@a and @b
  • 或（or）：@a or @b
  • 非（not）：not @a

示例：

1
2
3
4
5
@isActive: true;
@isVisible: false;
.box {
  display: if(@isActive and not @isVisible, block, none);
}

字符串连接：

1
2
3
4
5
@prefix: "prefix-";
@suffix: "-suffix";
.box {
  content: @prefix + "content" + @suffix; // "prefix-content-suffix"
}

这些运算符可以帮助你在 LESS 中实现更复杂的样式计算和动态生成。