css less

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

官网:

http://lesscss.cn/

node.js安装less

npm install -g less

gulp less使用

var gulp=require("gulp");

var less=require("gulp-less");

gulp.task("testless",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));

});

//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['testless']);

});

如果less有错误，会提示:

Potentially unhandled rejection [2] Unrecognised input. Possibly missing opening
'{' in file F:\nodejs\code\lessLearn\src\css\study.less line no. 15

在命令行中使用

一旦安装完成，就可以在命令行中调用，例如：

lessc styles.less


这样的话编译后的CSS将会输出到stdout中，你可以选择将这个输出重定向到文件中：

lessc styles.less > styles.css


如果你想输出一个压缩后的CSS，只要加到-x选项即可。如果你想要更NB的压缩，你也可以选择使用YUI CSS压缩器，只要加上--yui-compress选项即可。

直接运行lessc，不带任何参数将可以看到所有的命令行参数。

less语法

注释

// 单行注释，不会作为最终输出
/*
多行注释，以原生CSS的/*注释....*/形式作为最终输出
*/

 2. 变量(Variable)

Less中的变量有以下规则：

1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
2. 没有先定义后使用的规定；
3. 以最后定义的值为最终值；
4. 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5. 定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
6. 存在作用域，局部作用域优先级高于全局作用域。

Less源码：

最终输出：

  列表类型

less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数

（我测试时看到extract没有识别

）

最终输出：

  3. 嵌套(Nested)

Less源码：

最终输出：

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

例如：

.bordered {
&.float {
float: left;
}
.top {
margin: 5px;
}
}


会输出：

.bordered.float {
float: left;
}
.bordered .top {
margin: 5px;
}例子:
color: red;
text-decoration: none;
&:hover {
/*有 & 时解析的是同一个元素或此元素的伪类，没有 & 解析是后代元素，&表示当前选择器的父选择器*/
color: black;
text-decoration: underline;
}
}

& 的高级用法

用在选择器中的&还可以反转嵌套的顺序并且可以应用到多个类名上。

例如：

.child, .sibling {
.parent & {
color: black;
}
& + & {
color: red;
}
}


输出：

.parent .child,
.parent .sibling {
color: black;
}
.child + .child,
.child + .sibling,
.sibling + .child,
.sibling + .sibling {
color: red;
}


&也可以用在混合中用于指示嵌套这个混合的父选择器。

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。

http://lesscss.cn/features/#mixins-feature

"mix-in" properties from existing styles

You can mix-in class selectors and id selectors, e.g.

.a, #b {
color: red;
}
.mixin-class {
.a();
}
.mixin-id {
#b();
}


which results in:

.a, #b {
color: red;
}
.mixin-class {
color: red;
}
.mixin-id {
color: red;
}


Notice that when you call the mixin, the parentheses are optional.

// these two statements do the same thing:
.a();
.a;


Not Outputting the Mixin

If you want to create a mixin but you do not want that mixin to be output, you can put parentheses after it.

.my-mixin {
color: black;
}
.my-other-mixin() {
background: white;
}
.class {
.my-mixin;
.my-other-mixin;
}


outputs

.my-mixin {
color: black;
}
.class {
color: black;
background: white;
}


Selectors in Mixins

Mixins can contain more than just properties, they can contain selectors too.

For example:

.my-hover-mixin() {
&:hover {
border: 1px solid red;
}
}
button {
.my-hover-mixin();
}


Outputs

button:hover {
border: 1px solid red;
}


Namespaces

If you want to mixin properties inside a more complicated selector, you can stack up multiple id's or classes.

#outer {
.inner {
color: red;
}
}.c {
#outer > .inner;
}


and again both > and whitespace are optional

// all do the same thing
#outer > .inner;
#outer > .inner();
#outer .inner;
#outer .inner();
#outer.inner;
#outer.inner();


One use of this is known as namespacing. You can put your mixins under a id selector and this makes sure it won't conflict with another library.

Example:

#my-library {
.my-mixin() {
color: black;
}
}
// which can be used like this
.class {
#my-library > .my-mixin();
}

浏览器端使用

LESSCSS也可以不经编译，直接在浏览器端使用。

使用方法：

下载LESSCSS的.js文件，例如lesscss-1.4.0.min.js。
在页面中引入.less文件

<link rel="stylesheet/less" href="example.less" />
需要注意rel属性的值是stylesheet/less，而不是stylesheet。

引入第1步下载的.js文件

<script src="lesscss-1.4.0.min.js"></script>
需要特别注意的是，由于浏览器端使用时是使用ajax来拉取.less文件，因此直接在本机文件系统打开（即地址是file://开头）或者是有跨域的情况下会拉取不到.less文件，导致样式无法生效。

还有一种情况容易导致样式无法生效，就是部分服务器（以IIS居多）会对未知后缀的文件返回404，导致无法正常读取.less文件。解决方案是在服务器中为.less文件配置MIME值为text/css（具体方法请搜索）。或者还有一种更简单的方法，即是直接将.less文件改名为.css文件即可。

参考：
http://lesscss.cn/
http://www.cnblogs.com/fsjohnhuang/p/4187675.html
http://www.1024i.com/demo/less/document.html