“我的”Less

发表于 |

“我的”Less

LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 不要想那么多浏览器只认识 CSS 最终使用的也是 CSS，本篇文章主要使用 Node.js来进行编译 Less

使用

在客户端使用

如果你不会Node.js的话，你可以考虑以下工具进行使用

Less.js方式

直接使用.less样式文件可以先引入.less文件

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

less.js下载连接 Less.js 引入.less样式文件后，下载less.js，并在标签中引入less.js文件即可!

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

当然你也可以使用CDN来引用Less.js

1
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.7.1/less.min.js" ></script>

Kaola应用程序

koala是一个前端预处理器语言图形编译工具，支持Less、Sass、Compass、CoffeeScript，帮助web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。

Kaola下载地址 Kaola 这个就不细说了，直接拖如使用即可…

服务端使用

Node.js

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

1
npm install less

在命令行下使用

在终端调用Less解析器

1
lessc style.less

当前命令只是解析并返回 如果需要将编译后的CSS保存到一个文件中，需要向下面这样做

1
lessc style.less > style.css

当然这样编译后的文件与源文件.less文件在同一个位置，如果你不想这样做，可以在 > 后面同时加上目录，如下：

1
lessc style.less > ../css/style.css

如果还想将编译后的CSS压缩掉，加一个 -x 参数就可以了。

他会提示你压缩选项已被废弃。建议您使用专用的css压缩工具，例如：less-plugin-clean-css 当然目前来说，这个还是有用的，至于 less-plugin-clean-css 我就不做更多介绍了，感兴趣的可以直接去研究

这里给个链接供参考：less-plugin-clean-css

语法

LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！

变量

很容易理解，但是Less中的变量很像”常量”，所以只能定义一次!

1
2
3
4
5
6
7
8
// 定义变量
@main-blue : deepskyblue;
// 使用变量
* {
color : @main-blue;
}
// 甚至可以使用其进行计算
@other-blue : @main-blue + #111;  //输出 : #11d0ff

当然你还可以使用变量名定义为变量

1
2
3
4
5
6
7
8
// 定义一个变量
@main-width : 100px;
// 在定义一个变量，使用前一个变量的变量名作为该变量的值
@main-height : 'main-width';
div {
    width: @main-width;
    height: @@main-height;
}

混合

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

普通混合

定义混合，与普通 class 一样

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

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

1
2
3
4
5
div {
    width: 100px;
    height: 100px;
    .bordered;
}

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

带参数的混合

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

1
2
3
.border-radius (@radius) {
    border-radius : @radius;
}

然后在其他class中的调用方式

1
2
3
4
5
6
div {
    .border-radius(10px);
}
.button {
    .border-radius(10px);
}

当然你也可以这样给参数设置默认值

1
2
3
.border-radius (@radius: 10px) {
    border-radius: @radius;
}

调用的时候就可以不用传入参数

1
2
3
div {
    .border-radius;
}

不带参数的混合

想隐藏这个属性集合，不让它暴露到CSS中去，可以定义不带参数属性集合，同时依然可以在其他属性集合中引用

1
2
3
4
5
6
.wrap () {
    text-wrap: wrap;
}
pre {
    .wrap;
}

@arguments 变量

@arguments包含了所有传递进来的参数，如果你想使用所有变量的话可以这样使用

1
2
3
4
5
6
7
8
9
10
.btn-border (@size: 1px, @style: solid, @color: black,){
    border: @arguments;
}
button {
    .btn-border(3px,solid,red);
}
// 输出
button {
    border: 3px solid red;
}

模式匹配和引导表达式

匹配

可以定义相同名称的混合，根据传入的参数来改变混合的默认呈现,然后根不同的标识来进行匹配，匹配到的才会被编译

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.bg (black){
    background-color: black;
    height: 100px;
    width: 100px;
}
.bg (white){
    background-color: white;
    height: 50px;
    width: 50px;
}
.bg (@_){
    border-radius: 50%;
}
div {
    .bg(black);
}
// 输出
div {
    background-color: black;
    height: 100px;
    width: 100px;
}

首先会对标识进行匹配，然会在对参数进行匹配，最后在匹配@_ 因为它接收任意值 只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值

引导

想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果对函数式编程非常熟悉，那么你很可能已经使用过导引。 为了尽可能地保留CSS的可声明性，LESS通过导引混而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。

when关键字用以定义一个导引序列
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.border (@size) when (@size < 5) {
    border: @size solid red;
}
.border (@size) when (@size >= 5) {
    border: @size solid blue;
}
div {
    width: 100px;
    height: 100px;
    .border(5px);
}
// 输出
div {
    width: 100px;
    height: 100px;
    border: 5px solid blue;
}

导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的

1
2
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }

除去关键字true以外的值都被视示布尔假 当需要匹配多个条件时，使用逗号‘,’—割，当且仅当所有条件都符合时，才会被视为匹配成功

1
2
3
.border (@size) when (@size >= 5), (@size < 10) {
    border: @size solid green;
}

导引可以无参数，也可以对参数进行比较运算

1
2
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }

如果想基于值的类型进行匹配，我们就可以使用is* 函式 常见的检测函式：

  • iscolor
  • isnumber
  • isstring
  • iskeyword
  • isurl
  • ispixel
  • ispercentage
  • isem
1
.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
not

使用not关键字实现或条件

1
.mixin (@b) when not (@b > 0) { ... }
&

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div{
    width: 100px;
    height: 100px;
    &:hover{
        background-color: red;
    }
}
// 输出
div {
    width: 100px;
    height: 100px;
}
div:hover {
    background-color: red;
}

运算

任何数字、颜色或者变量都可以参与运算，它能够分辨出颜色和单位，括号也同样允许使用

1
2
3
@var: 1px + 5;
// 输出
@var : 6px;

函数

Color 函数

  • lighten(@color, 10%); // 返回比@color亮10％的颜色
  • darken(@color, 10%); // 返回比@color暗10％的颜色
  • saturate(@color, 10%); // 返回比@color饱和高10％的颜色
  • desaturate(@color, 10%); // 返回比@color饱和低10％的颜色
  • fadein(@color, 10%); // 返回透明度比@color低10%的颜色
  • fadeout(@color, 10%); // 返回透明度比@color高10%的颜色
  • fade(@color, 50%); // 返回@color 透明的为50%的颜色
    // (spin不是很懂，哈哈！)
  • spin(@color, 10); // 返回比@color大10度的颜色
  • spin(@color, -10); // 返回比@color小10度的颜色
  • mix(@color1, @color2); // 返回两种颜色的混合色
  • hue(@color); // 返回@color 的色调
  • saturation(@color); // 返回@color 的饱和度
  • lightness(@color); // 返回@color 的亮度
  • hsl(色调, 饱和度, 亮度); // 返回一个新的颜色

    Math 函数

  • round(1.67); // returns 2
  • ceil(2.4); // returns 3
  • floor(2.6); // returns 2 percentage(0.5); // 将一个值转化为百分百

其它

作用域

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

1
2
3
4
5
6
7
8
9
10
@color: red;
*{
    @color: black;
body{
    background-color: @color; // black
}
}
div{
    background-color: @color; // red
}

注释

CSS 形式的注释在 LESS 中是依然保留的，LESS 同样也支持双斜线的注释, 但是编译成 CSS 的时候自动过滤掉

1
2
/* 我是注释 */
// 我也是注释

Import

可以在任意.less文件中通过下面的形势引入(一般在index.less 或 main.less) .less 文件, .less 后缀可带可不带，如果想导入一个CSS文件而且不想LESS对它进行处理，只需要使用.css后缀就可以，这样LESS就会跳过它不去处理它

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

字符串插值

变量可以用类似ruby和php的方式嵌入到字符串中，像@{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()";
}

JavaScript 表达式

JavaScript 表达式也可以在.less 文件中使用. 可以通过反引号的方式使用，也可以同时使用字符串插值和避免编译，也可以访问JavaScript环境

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

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

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

声明

本篇文章由个人学习后的总结，意为“笔记”。
本文原创，转载请标注出处，谢谢！