Less 概述

1）动态样式语言

CSS 是一门非程序式语言，没有变量、函数、作用域等概念。CSS 被称之为 静态样式语言，从而导致样式文件的修改和维护困难。

动态样式语言 是指，在静态样式语言的基础上，添加了一门真正的语言所必需的元素：变量、数据类型、运算、逻辑结构、函数、继承等，从而大大提高样式的可修改和可维护性。

2）什么是 Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 官网：http://www.lesscss.net/

3）如何使用 Less

a. 在客户端使用

  • 在 HTML 页面的 <head> 元素内引入 .less 样式文件（**rel**属性值为stylesheet/less）。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  box-shadow:         @style @c;
  -webkit-box-shadow: @style @c;
  -moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}
  • 下载 less.js 文件，在 <head> 元素内引入。

值得注意的是： less 样式文件必须在 less.js 文件之前引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在客户端使用Less</title>
    <link rel="stylesheet/less" type="text/css" href="less/css/style.less">
    <script src="less/js/less.js"></script>
</head>
<body>
    <div class="box">
        <h1>标题</h1>
        <p>段落</p>
    </div>
</body>
</html>

b. 在服务器端使用

在服务器端安装 less 的最简单方式就是通过 npm（node 的包管理器）。

Node.js的安装及验证请参考《Node.js安装教程》

  • 通过 npm 工具包安装 less。
1
npm install less -g
  • 通过以下命令测试 less 是否安装成功。
1
lessc
命令行方式将 less 文件编译成 css 文件。
1
lessc style.less > style.css
配置 WebStorm 中的 less
  1. 点击“File”->“Setting”，弹出配置窗口。
  2. 点击“Tools”->“File Watchers”。
  3. 点击左下角的“加号”，选择Less选项。
  4. 配置“Program”选项，值为lessc的安装路径。

保存配置后，修改任意less文件，即可以自动生成一个css文件。

**值得注意的是：**此配置只对当前项目有效。如果创建新项目，必须重新进行配置。

Less 语法

1）注释

CSS 形式的注释在 LESS 中是依然保留的：

1
2
/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉：

1
2
// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

2）变量

变量就是一次声明可以多次使用的数据。

1
2
3
@nice-blue: #5B83AD;

#header { color: @ nice-blue; }

输出：

1
#header { color: #5B83AD; }

**值得注意的是：**LESS 中的变量为完全的‘常量’，所以只能定义一次。

3）混合

在 LESS 中可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性。

1
2
3
4
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果需要在其他 class 中引入那些通用的属性集，只需要在任何class中像下面这样调用就可以了。

1
2
3
4
5
6
7
8
#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}

.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来：

1
2
3
4
5
6
7
8
9
10
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

4）带参混合

在 LESS 中，还可以像函数一样定义一个带参数的属性集合：

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

然后在其他 class 中像这样调用：

1
2
3
4
5
6
#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}
为参数设置默认值：
1
2
3
4
5
.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

这样调用：

1
2
3
#header {
  .border-radius;  
}

@radius 的值就是 5px。

@arguments 变量

@arguments包含了所有传递进来的参数。

1
2
3
4
5
6
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);

将会输出：

1
2
3
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;

5）嵌套规则

LESS 可以以嵌套的方式编写层叠样式。例如以下案例：

1
2
3
4
5
6
7
8
9
10
#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}

在 LESS 中就可以这样写：

1
2
3
4
5
6
7
8
9
10
11
#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}

值得注意的是： & 符号的使用

如果想写串联选择器，而不是写后代选择器，就可以用到 & 了。

1
2
3
4
5
6
7
8
.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}

会这样输出：

1
2
3
4
5
6
.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}

6）运算

任何数字、颜色或者变量都可以参与运算。LESS 中允许的计算有+、-、*、/和%。

1
2
3
4
5
@screen-width: 992px;

.col-md-1 {
  width: floor(@screen-width/12);
}

将会输出：

1
2
3
.col-md-1 {
  width: 82px;
}

7）函数

LESS 内置了几十个函数，用于颜色转换、字符串处理和数学运算等。

a. Color 函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
lighten(@color, 10%);     // return a color which is 10% *lighter* than @color
darken(@color, 10%);      // return a color which is 10% *darker* than @color

saturate(@color, 10%);    // return a color 10% *more* saturated than @color
desaturate(@color, 10%);  // return a color 10% *less* saturated than @color

fadein(@color, 10%);      // return a color 10% *less* transparent than @color
fadeout(@color, 10%);     // return a color 10% *more* transparent than @color
fade(@color, 50%);        // return @color with 50% transparency

spin(@color, 10);         // return a color with a 10 degree larger in hue than @color
spin(@color, -10);        // return a color with a 10 degree smaller hue than @color

mix(@color1, @color2);    // return a mix of @color1 and @color2

例如下述案例：

1
2
3
4
5
6
@base: #f04615;

.class {
  color: saturate(@base, 5%);
  background-color: lighten(spin(@base, 8), 25%);
}

将会输出：

1
2
3
4
.class {
  color: #f6430f;
  background-color: #f8b38d;
}

b. Math 函数

1
2
3
round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`

8）文件导入

LESS 允许创建一个 main 文件（主要用于引入其他 LESS 文件）。

.less 后缀可带可不带。

1
2
@import "lib.less";
@import "lib";

**值得注意的是：**最后会生成一个 CSS 文件，而不是多个 CSS 文件。

9）定制 Bootstrap

a. 查看 Bootstrap 源码

打开 Bootstrap 源码包中的 less 目录中的 bootstrap.less 文件：

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
48
49
50
// 核心变量和混合类
@import "variables.less";
@import "mixins.less";

// 重置和依赖类
@import "normalize.less";
@import "print.less";
@import "glyphicons.less";

// 核心类
@import "scaffolding.less";
@import "type.less";
@import "code.less";
@import "grid.less";
@import "tables.less";
@import "forms.less";
@import "buttons.less";

// 组件类
@import "component-animations.less";
@import "dropdowns.less";
@import "button-groups.less";
@import "input-groups.less";
@import "navs.less";
@import "navbar.less";
@import "breadcrumbs.less";
@import "pagination.less";
@import "pager.less";
@import "labels.less";
@import "badges.less";
@import "jumbotron.less";
@import "thumbnails.less";
@import "alerts.less";
@import "progress-bars.less";
@import "media.less";
@import "list-group.less";
@import "panels.less";
@import "responsive-embed.less";
@import "wells.less";
@import "close.less";

// 插件类
@import "modals.less";
@import "tooltip.less";
@import "popovers.less";
@import "carousel.less";

// 工具类
@import "utilities.less";
@import "responsive-utilities.less";