前端技术分享
0%

CSS 预处理器 Less

发表于 分类于

Less 是什么？

Less 是 CSS 预处理器，类似 Sass，但语法更接近 CSS。

安装

1
npm install -g less

变量

1
2
3
4
5
@primary-color: #007bff;

.button {
  background-color: @primary-color;
}

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

混合 (Mixin)

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

.box {
  .border-radius(10px);
}

函数

1
2
3
4
5
6
7
.average(@x, @y) {
  @result: ((@x + @y) / 2);
}

.div {
  width: .average(10px, 20px);
}

运算

1
2
3
4
5
6
@width: 300px;

.container {
  width: @width;
  margin: (@width / 10);
}

导入

1
2
@import "variables.less";
@import "mixins.less";

编译

1
lessc styles.less styles.css

总结

Less 语法简洁，易学。适合喜欢接近 CSS 语法的开发者。