Less语法

LESS语法

变量是less入门基础知识，他适用于定义主题，我们可以将背景颜色、字体颜色、边框属性等常规样式进行统一定义，这样不同的主题只需要定义不同的变量文件就可以了。当然该特性也同样适用于 CSS RESET（重置样式表），在 Web 开发中，我们往往需要屏蔽浏览器默认的样式行为而需要重新定义样式表来覆盖浏览器的默认行为，这里可以使用 LESS 的变量特性，这样就可以在不同的项目间重用样式表，我们仅需要在不同的项目样式表中，根据需求重新给变量赋值即可。

安装

$ npm install -g less

命令行用法

安装 Less 后，就可以在命令行上调用 Less 编译器了，如下：

$ lessc styles.less

这将输出编译之后的 CSS 代码到 stdout，你可以将输出重定向到一个文件：

$ lessc styles.less > styles.css

若要输出压缩过的 CSS，只需添加-x选项。如果希望获得更好的压缩效果，还可以通过 --clean-css 选项启用 Clean CSS 进行压缩。

执行 lessc 且不带任何参数，就会在命令行上输出所有可用选项的列表。

调用 Less(node平台)

var less = require(‘less’);

less.render(‘.class { width: (1 + 1) }’, function (e, css) {
console.log(css);
});

输出为：

.class {
width: 2;
}

也可以手动调用分析器（paser）和编译器：

var parser = new(less.Parser);

parser.parse(‘.class { width: (1 + 1) }’, function (err, tree) {
if (err) {
return console.error(err)
}
console.log(tree.toCSS());
});

配置

可以给编辑器传递多个参数：

var parser = new(less.Parser)({
paths: [‘.’, ‘./lib’], // Specify search paths for @import directives
filename: ‘style.less’ // Specify a filename, for better error messages
});

parser.parse(‘.class { width: (1 + 1) }’, function (e, tree) {
tree.toCSS({
// Minify CSS output
compress: true
});
});

客户端用法

在客户端使用 Less.js 是最容易的方式，并且在开发阶段很方便，但是，在生产环境中，性能和可靠性非常重要，我们建议最好使用 node.js 或其它第三方工具进行预编译。

less的引用方法和css雷同：

<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet/less" type="text/css" href="styles.less" />

由于less不能直接使用，需要编译，所以，再引第三方一个插件包。

<script src="less.js" type="text/javascript"></script>

特别注意：

  1. 务必确保在less.js之前加载样式。
  2. 如果加载多个.less样式表文件，每个文件都会被单独编译。因此，一个文件中所定义的任何变量、mixin 或命名空间都无法在其它文件中访问。全局变量除外。

less变量的用法

1
2
3
4
5
6

@border-color : #b5bcc7;

.mythemes tableBorder{

border : 1px solid @border-color;

编译为：

.mythemes tableBorder {

border: 1px solid #b5bcc7;

}

生命周期

局部变量还是全局变量
查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@width : 20px;

#homeDiv {

  @width : 30px;

  #centerDiv{

      width : @width;// 此处应该取最近定义的变量 width 的值 30px
      
  }
  
}

#leftDiv {

    width : @width; // 此处应该取最上面定义的变量 width 的值 20px
}

只要在局部作用域里都要继承局部的变量：

#homeDiv #centerDiv {

width: 30px;

}

#leftDiv {

width: 20px;

}

列表类型：

1
2
3
4

@colors: #FFF, #0F0, #F0F;.skin{color: extract(@colors,0);height: 12px*length(@colors);

}

编译为：

.skin{

color: #FFF;height: 36px;

}

mixins

在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样

定义一个 样式选择器：

1
2
3
4
5
6
7
8
9
.roundedCorners(@radius:5px) {

  -moz-border-radius: @radius;

  -webkit-border-radius: @radius;

  border-radius: @radius;

}

在另外的样式选择器中使用：

1
2
3
4
5
6
7
8
9
10
11
#header {

  .roundedCorners;

}

#footer {

  .roundedCorners(10px);

}

编译为:

#header {

-moz-border-radius:5px;

-webkit-border-radius:5px;

border-radius:5px;

}

#footer {

-moz-border-radius:10px;

-webkit-border-radius:10px;

border-radius:10px;

}

其中.roundedCorners(@radius:5px)代表的意思是调用的时候如果不传参数那么就默认是5px，传参的话就以参数为准。做到了很大的灵活性。

arguments

像 JavaScript 中 arguments一样，Mixins 也有这样一个变量：@arguments。@arguments 在 Mixins 中具是一个很特别的参数，当 Mixins 引用这个参数时，该参数表示所有的变量，很多情况下，这个参数可以省去你很多代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){

-moz-box-shadow: @arguments;

-webkit-box-shadow: @arguments;

box-shadow: @arguments;

}

#header {

.boxShadow(2px,2px,3px,#f36);

}

编译为：

#header {

-moz-box-shadow: 2px 2px 3px #FF36;

-webkit-box-shadow: 2px 2px 3px #FF36;

box-shadow: 2px 2px 3px #FF36;

}

当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？

采用命名空间的方法来避免重名问题

#mynamespace {

.home {…}

.user {…}

}

这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user。

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
#bundle {

  .button () {

   display: block;

   border: 1px solid black;

   background-color: grey;

  &:hover { background-color: white

 }

}

 .tab { ... }

 .citation { ... }

}

//引入.button

#header a {

 color: orange;

 #bundle > .button;

}

上面的&符号，是父级的简写，在上面表示.button。

嵌套的规则和js中的作用域很像，这里不再多说。

综合示例：

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
-webkit-box-shadow: @style @c;
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%) }
}

编译为：

.box {
color: #fe33ac;
border-color: #fdcdea;
}
.box div {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

对于上式很多人可能看不明白，那么下面就来从简入繁详细讲解一下。

简单变量的应用：

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

@light-blue: @nice-blue + #111;
#header {
    color: @light-blue;
}

编译为：

1
2
3
#header {
  color: #6c94be;
}

变量@nice-blue赋值，下面再引用这个变量的时候可以对其进行计算，取计算后的结果。而且变量只能定义一次。（这里是抛开生命周期来说的）。

更多变量用法

运算

  1. 任何数字、颜色或者变量都可以参与运算。这就是less的魅力所在。下面是一组案例：
1
2
3
4
5
6
7
@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;
  1. Less 将会使用出现的单位
1
2
3
@var: 1px + 5;

//最终输出的结果为：6px；

函数

  1. Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%，将颜色饱和度增加 5%，以及颜色亮度降低 25% 并且色相值增加 8 等用法：
1
2
3
4
5
6
7
8
@base: #f04615;
@width: 0.5;

.class {
  width: percentage(@width); // returns `50%`
  color: saturate(@base, 5%);
  background-color: spin(lighten(@base, 25%), 8);
}
  1. 看了上面例子可能还不明白，由于函数太多，所以链接一个官网地址，自行参考。Less函数手册

导入(importe)

和你预期的工作方式一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

@import “library”; // library.less
@import “typo.css”;

注释

块注释和行注释都可以使用：

/ 一个注释块
style comment! /
@var: red;

// 这一行被注释掉了！
@var: white;

循环和合并

  1. 循环
1
2
3
4
5
6
7
8
.loop(@counter) when (@counter > 0) {
  .loop((@counter - 1));    // next iteration
  width: (10px * @counter); // code for each iteration
}

div {
  .loop(5); // launch the loop
}

编译为：

1
2
3
4
5
6
7
div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

下面就是一个用于生成 CSS 栅格类的递归循环的实例：

1
2
3
4
5
6
7
8
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

编译为：

1
2
3
4
5
6
7
8
9
10
11
12
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}
  1. 合并

merge 特性能够聚合多个属性从而形成一个用逗号分隔的单一属性。merge 对于像 background 和 transform 这类属性非常有用。

添加于 v1.5.0 版本

1
2
3
4
5
6
7
.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}

编译为：

1
2
3
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

为了避免意外的合并，merge 需要在每个需要合并的属性名后面添加一个 + 以作标示。

文章目录
  1. 1. LESS语法
    1. 1.1. 安装
    2. 1.2. 命令行用法
    3. 1.3. 调用 Less(node平台)
    4. 1.4. 配置
    5. 1.5. 客户端用法
      1. 1.5.0.1. less的引用方法和css雷同：
      2. 1.5.0.2. 特别注意：
  2. 1.6. less变量的用法
    1. 1.6.1. 生命周期
      1. 1.6.1.1. 列表类型：
    2. 1.6.2. mixins
    3. 1.6.3. arguments
  3. 1.7. 综合示例：
    1. 1.7.1. 简单变量的应用：
    2. 1.7.2. 运算
    3. 1.7.3. 函数
    4. 1.7.4. 导入(importe)
    5. 1.7.5. 注释
    6. 1.7.6. 循环和合并
|