Less

发表于 | 分类于 | 阅读次数:

Less

less是一种动态样式语言。

less将css赋予了动态语言的特性，如变量、继承、运算、函数。less既可以在客户端运行（支持IE6+，Webkit，Firefox)，也可以借助Node.js或者Rhino在服务端运行。

使用方法

在客户端使用

在引入less.js前先要把你的样式文件引入，引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less” :

1
2
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

备注：请在服务器环境下使用！本地直接打开可能会报错！

监视模式

监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。

要使用它，只要在URL后面加上’#!watch‘，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。

在服务器端使用

安装

在服务器端安装less的最简单方式就是通过npm(node的包管理器)：

1
npm install less

希望下载最新稳定版本的less，可以通过：

1
npm i less@latest
使用
1
2
3
4
5
var less = require('less')

less.render('.class { width: 1 + 1 }', function (e, css) {
    console.log(css);
})
配置

你可以向解析器传递参数:

1
2
3
4
5
6
7
8
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({ compress: true }); // Minify CSS output
});
在命令行下使用

你可以在终端调用 LESS 解析器:

1
$ lessc styles.less

上面的命令会将编译后的 CSS 传递给 stdout, 你可以将它保存到一个文件中:

1
$ lessc styles.less > styles.css

如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.

less语法

变量

1
2
3
4
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header { color: @light-blue; }

输出：

1
#header { color: #6c94be; }

也可以用变量名定义为变量:

1
2
3
@name: "I am name.";
@var: "Ankle";
content: @@var;

输出：

1
content: "I am Ankle."

请注意 LESS 中的变量为完全的 ‘常量’ ，所以只能定义一次.

混合

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

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

现在需要在其他class中引入通用的属性集，调用如下：

1
2
3
4
#menu a {
  color: #111;
  .bordered;
}

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

1
2
3
4
5
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.

带参数混合

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

1
2
3
4
5
6
7
8
9
.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
/*设置默认数值*/
.border-radius (@radius: 5px) {
  ···
}

在其他class中调用：

1
2
3
4
5
6
#header {
  .border-radius(4px);
}
#button {
  .border-radius;   // border-radius: 5px;
}

你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:

1
2
3
4
5
6
7
8
.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }

解析：

1
2
3
4
5
6
pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

@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;

模式匹配和导引表达式

模式匹配和导引表达式

嵌套

例：

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 }
  }
}

注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.

运算

任何数字、颜色或者变量都可以参与运算. 来看一组例子:

1
2
3
4
5
6
7
@base: 5%;
@filler: @base * 2;
@other: @base + @filter;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的运算已经超出了我们的期望，它能够分辨出颜色和单位.

Color函数

LESS 提供了一系列的颜色运算函数. 颜色会先被转化成 HSL 色彩空间, 然后在通道级别操作:

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%);
}

Math函数

LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:

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

如果你想将一个值转化为百分比，你可以使用percentage 函数:

1
percentage(0.5); // returns `50%`

命名空间

为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:

1
2
3
4
5
6
7
8
9
10
#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}

使用方法：

1
2
3
4
#header a {
  color: orange;
  #bundle > .button;
}

作用域

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

1
2
3
4
5
6
7
8
9
10
11
12
@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}

注释

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 }

字符串插值

变量可以用下面的方式嵌入到字符串中，像@{name}这样的结构:

1
2
@base-url: "http://assets.fnord.com";
background-image: url("@{base-url}/images/bg.png");

避免编译

有时候我们需要输出一些不正确的CSS语法或者使用一些 LESS不认识的专有语法.

要输出这样的值我们可以在字符串前加上一个 ~, 例如:

1
2
3
.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

我们可以将要避免编译的值用 “”包含起来，输出结果为:

1
2
3
.class {
  filter: ms:alwaysHasItsOwnSyntax.For.Stuff();
}

JavaScript表达式?????

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用:

1
@var: `"hello".toUpperCase() + '!'`;

输出:

1
@var: "HELLO!";

注意你也可以同时使用字符串插值和避免编译:

1
2
@str: "hello";
@var: ~`"@{str}".toUpperCase() + '!'`;

输出:

1
@var: HELLO!;

它也可以访问JavaScript环境:

1
@height: `document.body.clientHeight`;

如果你想将一个JavaScript字符串解析成16进制的颜色值, 你可以使用 color 函数:

1
2
@color: color(`window.colors.baseColor`);
@darkcolor: darken(@color, 10%);