Less入门

1、为什么使用Less

每一门技术的出现都是为了解决现存的问题，同样的，Less 的出现是为了解决 CSS 中过于呆板的写法，LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数.。Less 是一门 CSS 预处理语言，总结一下为：Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解，那么就可以很快的掌握并在你的项目中使用 Less。Less 可以运行在 Node 或浏览器端。

2、安装使用

使用 Npm 全局安装 Less

$ npm install less -g

方式一：

引入less.js前先要把你的样式文件引入 :

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

注意你的less样式文件一定要在引入less.js前先引入。

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

监视模式：

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

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

 

方式二：

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

$ lessc styles.less

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

$ lessc styles.less > styles.css

如何你想将编译后的 CSS 压缩掉，那么加一个 -x 参数就可以了.然后在页面引入css即可。

 

 

3、使用语法

1、变量

@ 符号定义变量，使用 @ 符号获取变量。

@blue:blue;
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;  //#6C94BE


.main {   
    background-color: @blue;  //属性使用变量
    color: @light-blue;
}

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

 

2、混合

在 LESS 中，混入是指在一个 CLASS 中引入另外一个已经定义的 CLASS，就像在当前 CLASS 中增加一个属性一样。混合也是减少代码书写量的一个方法。

• 普通混合；

• 带参数的混合；

• 带参数并且有默认值的混合；

• 带多个参数的混合；

a、普通混合

混合的类名在定义的时候加上小括弧 ()，那么在转译成 css 文件时就不会出现；

//.bordered {   //定义一个通用属性的class, 在编译出的css文件不会出现该类
//  border-top: darkblue 1px dotted;
//  border-bottom: green 2px solid;
//}

.bordered() {   //定义一个通用属性的class, 带有（）,在编译出的css文件不会出现该类
    border-top: darkblue 1px dotted;
    border-bottom: green 2px solid;
}



.main {
    color: yellow;
    .bordered;  //调用上面定义的通用属性集class
}
.content{
    .bordered; //调用上面定义的通用属性集class
}

b、带参混合

如果不是按照顺序传值，那就将所传值的属性名标注上；

.div-width (@varW) {   //带参数的混合
    width: @varW;
}
.div-height (@varH:100px) {  //带默认参数值的混合
    height: @varH;
}
.p-style (@h, @w, @c){
    width: @w;
    height: @h;
    color: @c;
}


.div1{
    .div-width(50px);
    .div-height(200px);
}
.div2{
    .div-width(60px);
    .div-height;  //使用到它的默认参数
}
p{
    .p-style(@w: 300px, @h: 100px, @c: pink); //不按顺序传值，就将参数名都标上
}

3、匹配模式

规则较多，详情可参考官网说明：http://www.bootcss.com/p/lesscss/#guide

@media: mobile;

.bc(@a) when (@media = mobile) { //导引中可用的全部比较运算有： > >= = =< <
    background-color: @a;
}
.color(@b) when (iscolor(@b)) { //使用is*函数
    color: @b;
}

p{
    .bc(red);
    .color(#00ff00);
}

 

4、。。。