Less 使用笔记

发表于 | 分类于 ， | 评论数： | 阅读次数：
Less 是一种 CSS 预处理语言. 通过引入变量, 函数, 循环, 条件, 混合等概念, 使得样式表易于管理. 本文将结合使用示例详细讲解 Less 的使用.

1. 相关网站

2. Less是什么

  • Less 是一种 CSS 预处理语言. 其在 CSS 的基础上, 增加了变量, Mixin, 函数等特性. 增加了 CSS 的可维护可重用性.
  • Less 需要 node.js 的支持. 可运行于 Node 或 浏览器端.

3. Less2CSS

  1. 安装 node.js

  2. 使用 node.js 中的 npm 安装 less.

    1
    npm install -g less

  3. 使用 lessc, less 文件编译为 css 文件

    1
    lessc style.less style.css

3.1. lessc命令行参数选项

1
2
3
4
5
6
7
8
9
10
11
12
# 定义 全局变量, 可在文件中使用
# 注意: 使用=连接key和val
--global-var="crtSkinName=skin_blue"

# 修改 less 中的变量值 
--modify-var="crtSkinName=skin_golden"

# 检查语法并报告错误, 不输出文件
--lint 

# 强制停止错误消息显示
--silent

4. Less比CSS多出的特性

  • 转义语法为 ~"待转义字符"

4.1. Less导入其他文件

  • 使用 @import 伪指令导入其他 less 文件. 可出现在文件任意位置.
    • 如果 import 的文件后缀是 css, 则导入的内容被视为 css, 不作编译处理.
    • 如果 import 的文件后缀是其他, 都将视为 less 文件导入.
  • import 支持各种导入选项. 选项写在()中, 多个选项之间使用,分割.
    • (reference): 使用一个 less 作为参考, 不输出它本身.
    • (inline): 将 css 直接不作处理的复制到输出 css 文件中.
    • (less): 指定导入为 less 文件, 而不看文件后缀.
    • (css): 指定导入为 css 文件, 而不看文件后缀.
    • (once): 只导入一次该文件.
    • (multiple): 多次导入文件.
    • (optional): 即使找不到要导入的文件, 也仍然会继续编译.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//-------------- importA.less -------------
.Label {
    background-color: red;
    color: black;
}

//-------------- test.less -------------
@import (reference) "./importA.less";
//@import (inline) "./test.css";

#Wgt {
    .Label();
}

//-------------- test.css -------------
#Wgt {
  background-color: red;
  color: black;
}

4.2. 选择器的嵌套

  • 在嵌套中, 可使用&表示其所有父选择器.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
MainWindow {
    color: white;
    h1 {
        color: red;
    }
    #MyBtn, @MyBtn1, #MyBtn2{
        &:hover {
            color: blue;
        }
        &_1 {
            color: yellow;
        }
    }
}

//--------- 生成的 CSS ----------
MainWindow {
  color: white;
}
MainWindow h1 {
  color: red;
}
MainWindow #MyBtn:hover,
MainWindow #MyBtn1:hover,
MainWindow #MyBtn2:hover {
  color: blue;
}
MainWindow #MyBtn_1,
MainWindow #MyBtn1_1,
MainWindow #MyBtn2_1 {
  color: yellow;
}

4.3. 算术运算符

  • 支持 +, -, *, / 运算符
  • 可作用于 数字, 颜色, 变量
1
2
3
4
5
6
7
8
9
10
@nSize: 10px;

h1 {
    padding: @nSize + 5  @nSize - 5  @nSize * 5 @nSize / 3;
}

//--------- 生成的 CSS ----------
h1 {
  padding: 15px 5px 50px 3.33333333px;
}

4.4. 变量

  • 更像是其他语言的常量, 因为它只能被定义一次. 以最后定义的值为最终值.
  • 可用于: rule属性, rule值, rule属性部件, 选择器, 选择器部件, 字符串拼接.
  • 定义: @变量名: 变量值;
  • 使用: @变量名 或 @{变量名}
    • 只有用于 rule值 时使用@变量名, 其他时候都使用@{变量名}
  • 变量中可存储:
    • 单值类型: 普通值(eg: 12px, 12, abc, #fff), css.
    • 列表类型:
      • 定义时: eg @testArray: #fff, #000, #00f;
      • 使用extract(@testArray, 1)获取列表元素, index 从 1 开始计数(程序员看着很别扭).
      • 使用length(@testArray)获取列表元素个数
  • 可使用多个@来模拟出类似于 C指针 的用法.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
@bkCol: #ffffff;

@mainColor: bkCol;

.pre {
    background-color: @mainColor;
    // 使用 @mainColor 获得字符串 bkCol, 再获取 @bkCol 的值. 相当于指针.
    color: @@mainColor + #111;
}
//--------- 生成的 CSS ----------
.pre {
  background-color: #ffffff;
  color: #ffffff;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@var: {
    font-family: "Comic Sans MS";
    background-color: #AA86EE;

    .MyClass {
        color: red;
    }
};
// 调用
#PushButton {
    @var();
}
//--------- 生成的 CSS ----------
#PushButton {
  font-family: "Comic Sans MS";
  background-color: #AA86EE;
}
#PushButton .MyClass {
  color: red;
}

5. 继承extend

  • 使用extend(父选择器)继承父选择器.
  • 父选择器 必须严格匹配, 除了属性选择器中属性值的引号不必匹配, 或添加了 all 关键字.

  • 父选择器不能是变量编译后的内容, 也不能在 extend() 中传入变量.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    @p1: .ButtonA;
    @p2: .ButtonB;

    .ButtonA {
        color: red;
    }
    @{p2} {
        color: blue;
    }

    // extend 中不能使用变量
    .MyButton1:extend(@{p1}) { }

    // 因为 .ButtonB 是 @p2 编译后产生的选择器, 所以不能 extend
    .MyButton2:extend(.ButtonB) {}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.animal{
    color:white;
}
.animal:hover{
    color: red;
}

// 语法1: extend 直接放在选择器后
.bear:extend(.animal:hover){
    width: 100px;
}
//语法2: 使用了 &
.deer{
    &:extend(.animal);
    width: 50px;
}
//--------- 生成的 CSS ----------
.animal,
.deer {
  color: white;
}
.animal:hover,
.bear {
  color: red;
}
.bear {
  width: 100px;
}
.deer {
  width: 50px;
}

5.1. 可供调用的函数

5.2. Mixins混合

  • 类似于其他编程语言中的函数, 将一组 CSS 封装起来, 并可以提供参数.
  • 其功能为: 按照各条件和参数, 输出指定 css.
  • 因为没有条件语句, 可使用保护的命名空间来模拟该语法功能. 只有在条件返回为真时才使用.
  • 可使用 ! important 关键字来覆盖特定属性.
  • 声明混合: 可使用类选择器或id选择器用和使用正常CSS一样的方式来声明.
  • 带参数
    • 参数之间使用 ;或, 分割(建议使用;). 且该部分样式只在调用处展开.
    • 参数可提供默认形参, 实参传入的时候尽量使用名字指定具体参数, 而不使用位置指定.
    • 使用 @参数名 表示参数.
    • 使用 @{参数名} 和 ~"" 配合, 实现字符串替换.
    • @arguments 表示使用所有参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 可使用 . 和 # 选择器, 定义 mixin
// 无参数 mixin 会在定义处展开
.Label {
    margin: 0px 0px 0px 0px;
}
// 带参数时, 推荐使用 ; 分割各参数
// 带参数 mixin, 不会在定义处展开
.BorderCss(@borderW; @borderStyle; @borderCol) {
    // @arguments 表示顺序使用所有参数
    border: @arguments;
    border-left-color: @borderCol;
}
#WgtCSS(@objName; @width; @height)
{
    @{objName} {
        width: @width;
        height: @height + 2px;
    }
}
// 使用
.MyWgt {
    .Label();   // ()可省略 

    padding-left: 5px;
    padding-right: 5px;
    .BorderCss(@borderW: 2px; @borderStyle: bold; 
    @borderCol: red);

    // ~" " 表示转义, 不对 #BtnA 作解析
    #WgtCSS(@objName: ~"#BtnA"; @width:10px; @height:5px);
}

//--------- 生成的 CSS ----------
.Label {
  margin: 0px 0px 0px 0px;
}
.MyWgt {
  margin: 0px 0px 0px 0px;
  padding-left: 5px;
  padding-right: 5px;
  border: 2px bold red;
  border-left-color: red;
}
.MyWgt #BtnA {
  width: 10px;
  height: 7px;
}

5.2.1. Mixin中可包含的内容

  • 可包含普通 CSS 语法.
  • 可定义变量. 说的是可在 Mixin 中定义变量. 其中的变量会在调用 Mixin 处展开.
    • 变量存在作用域. 当调用 Mixin 时存在同名变量时, 在调用者中包含的变量优先级最高.
  • 可定义 Mixin.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.WidgetMixin(@col) {
    color: @col;
    // 定义 Mixin
    .BorderMixin(@borderW; @borderCol) {
        border: @borderW solid @borderCol;
    }
    // 定义 变量
    @bkCol: @col + #888;
}
// 调用
#MyWgt {
    .WidgetMixin(@col: red);
    // 调用了 WidgetMixin 后, .BorderMixin 和 @bkCol 就都包含在其中了
    .BorderMixin(@borderCol: black; @borderW: 10px);
    background-color: @bkCol;
}
//--------- 生成的 CSS ----------
#MyWgt {
  color: red;
  border: 10px solid black;
  background-color: #ff8888;
}

5.2.2. 可变数量参数

  • 可使用 ... 表示可变数量参数.
  • 可使用 @rest... 变量表示剩余的参数.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 使用 ...
.BorderCSS(...){
    border: @arguments;
}
// 使用 @rest...
.BorderCSS_1(@col; @rest...) {
    color: @col;
    border: @rest;
}

#MyWgt {
    .BorderCSS(1px; solid; red);
}

#MyWgt_1 {
    .BorderCSS_1(@col: blue; @rest: 2px solid black);
}
//--------- 生成的 CSS ----------
#MyWgt {
  border: 1px solid red;
}
#MyWgt_1 {
  color: blue;
  border: 2px solid black;
}

5.2.3. 模式匹配

  • 可根据不同的参数个数, 匹配不同的 mixin.

用于规定一定的条件, 符合条件则展开

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 只能匹配第一个参数为 blueSkin 的调用
.ButtonCss(blueSkin, @bkCol) {
    background-color: darken(@bkCol, 10%);
    color: white;
}
.ButtonCss(whiteSkin, @bkCol) {
    background-color: lighten(@bkCol, 10%);
    color: black;
}
// @_ 可匹配任何值
.ButtonCss(@_, @bkCol) {
    padding: none;
}
//调用
@crtSkin: whiteSkin;
#MyButton {
    .ButtonCss(@crtSkin, @bkCol: #888);
}

//--------- 生成的 CSS ----------
#MyButton {
  background-color: #a2a2a2;
  color: black;
  padding: none;
}

5.3. 条件判断

  • 没有 if/else 语法, 而是使用 Guards. 用于执行指定匹配的 mixin.
  • 比较运算符: <, >, <=, >=, =.
    • = 可用于比较数字, 字符串, 标识符等.
    • 其他只能用于比较数字.
  • 逻辑运算符: when, and表示与, ,表示或, not非.
  • 类型检查函数:
    • 检查特定类型: iscolor(), isnumber(), isstring(), iskeyword(), isurl().
    • 检查特定单位: ispixel(), ispercentage(), isem(), isunit().
  • default() 表示 条件语句中的 else, switch 语句中的 default.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// [1] and 为 &&, not 为 !
.mixin(@skin; @col) when (@skin = "blue") and (not (@col = red))
{
    color: blue;
    background-color: white;
}
// [2] , 为 ||
.mixin(@skin; @col) when (@skin = "red"), (iscolor(@col))
{
    color: red;
    background-color: black; 
}
.TempMixin(@w) when (@w < 10px)
{
    padding-left: @w;
}
.TempMixin(@w) when (@w = 10px)
{
    padding-right: @w;
}
// default()
.TempMixin(@w) when (default())
{
    padding-bottom: @w;
}
// 使用
#Wgt {
    // 符合 [1] 和 [2] 的条件
    .mixin(@skin:"blue"; @col: black);

    // 符合 default() 条件
    .TempMixin(12px);
}
//--------- 生成的 CSS ----------
#Wgt {
  color: blue;
  background-color: white;

  color: red;
  background-color: black;

  padding-bottom: 12px;
}

5.4. 循环

  • Less 的循环使用 递归 来实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.generate-columns(@n, @i: 1) when (@i =< @n) {
    .column-@{i} {
        width: (@i * 100% / @n);
    }
    // 递归调用
    .generate-columns(@n, (@i + 1));
}
// 调用
.generate-columns(4);
//--------- 生成的 CSS ----------
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

5.5. 合并merge

  • 在一般 css 属性后, 增加 + 和 +_, 来实现相同属性的值合并.
    • +: 使用 , 合并各部分的值.
    • +_: 使用 空格合并各部分的值.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
#MyButton {
    // +_ 使用 空格 合并
    padding+_: 10px;
    padding+_: 5px;

    // + 使用 , 合并
    margin+: 10px;
    margin+: 5px;
}
//--------- 生成的 CSS ----------
#MyButton {
  padding: 10px 5px;
  margin: 10px, 5px;
}

— 道理越辩越明, 欢迎留言讨论. —

0%