语言►Less

Less的基础语法

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/29/Less%E7%9A%84%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/

摘要

本文主要讲述了：

  1. 注释
  2. 变量
  3. 选择器嵌套
  4. @import
  5. mixin
  6. 转义

正文

注释

Less 支持 2 种注释风格：

  • 单行注释，使用//
  • 多行注释，使用/**/

变量

Less 使用@创建变量。

示例：

源文件：

1
2
3
4
5
6
7
@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}

输出：

1
2
3
4
#header {
  width: 10px;
  height: 20px;
}

选择器嵌套

示例：

源文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

输出：

1
2
3
4
5
6
7
8
9
10
11
12
13
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

@import

示例：

源文件：

base.less

1
2
3
4
@import 'reset';
body {
  margin: 0;
}

reset.less

1
2
3
4
5
6
7
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

输出：

1
2
3
4
5
6
7
8
9
10
html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}
body {
  margin: 0;
}

mixin

示例：

源文件：

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
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/08/29/Less%E7%9A%84%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/

本文对你有帮助？请支持我

支付宝
微信