LESS简介

LESS简介

什么是less？

CSS并不能称之为一门真正的编程语言，一般称为层叠样式表。因为CSS中充斥着大量重复的定义，不但编写的时候难组织、代码量大，而且随着以后规模扩大二次开发的问题更明显，其中最明显的就是无法定义变量供我们重复使用以及命名空间的问题。

less是使用JavaScript编写的一种CSS预处理语言。less将CSS赋予了动态语言的特性，如变量，继承，运算，函数。less既可以在客户端上运行（支持IE6+、Webkit，Firefox），也可以借助Node.js或者Rhino在服务端运行。

使用方法

1、在客户端使用

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

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

         <scripttype="text/javascript" src="js/less-1.7.1.js"></script>

单这种做法容易出错，并且在我们的编译工具下需要配置一些东西才可以使用，我们有更好的办法，就是找第三方工具先编译一次less文件-css文件，然后再去使用。目前较好的编译工具是koala工具编译器。

使用koala时只要找到文件路径，选中需要执行的文件后右键点击执行选项就可以对less文件进行编译执行了。koala下载路径：http://koala-app.com/

 

2、在服务器端使用

安装：

在服务器端安装less的最简单方式就是通过npm（node的包管理器）$  npm  install less

使用：

安装了less后，就可以在node中像这样调用编译器：

         var less = require（'less'）;

         less.render（'.class {width: 1 + 1 }', function （e, css） {

                   console.log（css）;

         }）

上面会输出：

         .class {

                  width:2;

         }

也可以手动调用解析器和编译器：

         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({compress:  true });  // Minify CSS output

         });

在命令行下使用:

可以在终端调用less解析器：$ lesscstyles.less

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

         $ lessc styles.less > styles.less

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

less语法

1、变量

@nice-blue：#5B83AD;

@light-blue：@ nice-blue+ #111;

 

#header{ color：@light-blue ;}

输出：#header { color：#6c94be ;}

------------------------------------------------------

可以用变量名定义为变量：

@fnord："I  am fnord.";

@var：'fnord';

content：@@var;

解析后：content："I  am fnord.";

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

 

2、混合

.bordered {

         border-top：dotted  1px black;

         border-bottom：solid  2px black;

}

引用：

#men  a  {

         color：#111;

         .bordered;

}

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

#men  a  {

         color：#111;

         border-top：dotted  1px black;

         border-bottom：solid  2px black;

}

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

 

3、带参数混合

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

.border-radius (@radius) {

         border-radius：@radius;

         -moz-border-radius：@radius;

         -webkit-border-radius：@radius;

}

在其他class中调用：

#header {

         .border-radius(4px);

}

.button {

         .border-radius(6px);

}

----------------------------------------------------------

还可以像这样给参数设置默认值：

.border-radius (@radius：5px) {

         border-radius：@radius;

         -moz-border-radius：@radius;

         -webkit-border-radius：@radius;

}

再这样调用它：

#header {

         .border-radius;

}

radius的值就会是5px

---------------------------------------------------------------

可以定义不带参数属性集合，如果想隐藏这个属性集合，不让它暴露到CSS中去，但是又想在其他属性集合中引用，可以采用以下方法：

.wrap () {

         text-wrap：wrap;

         white-space：pre-wrap;

         white-space：-moz-pre-wrap;

         word-wrap：break-word;

}

 

pre { .wrap }

输出：

pre {

         text-wrap：wrap;

         white-space：pre-wrap;

         white-space：-moz-pre-wrap;

         word-wrap：break-word;

}

--------------------------------------------------------------

@arguments变量包含了所有传递进来的参数。如果不想单独处理每一个参数的话可以这样写：

.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);

将会输出：

         box-shadow:  2px 5px  1px  #000;

         -moz-box-shadow:  2px  5px 1px  #000;

         -webkit-box-shadow:  2px  5px 1px  #000;

 

4、模式匹配

根据传入的参数来改变混合的默认呈现：

.mixin (@s, @color) {..........}

.class {

         .mixin(@switch,  #888);

}

如果想让.mixin根据不同的@switch值而表现各异，设置如下：

.mixin (dark, @color) {

         color:darken(@color, 10%);

}

.mixin (light,  @color) {

         color:lighten(@color, 10%);

}

.mixin (@_ , @color) {

         display:block;

}

 

如果运行：

@switch： light;

.class {

         .mixin(@switch,  #888);

}

将会得到下列CSS：

.class {

         color:  #a2a2a2;

         display:  block;

}

如上，.mixin会得到传入颜色为浅色。实现如下：

第一个混合定义未被匹配，因为它只接受dark作为首参

第二个混合定义被成功匹配，因为它只接受light

第三个混合定义被成功匹配，因为它接受任意值

只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的值。

 

5、嵌套规则

在less中可以这样写：

#header {

         color：black；

         .navigation {

                   font-size:12px;

         }

}

6、运算

任何数字、颜色或者变量都可以参与运算。

@base: 5%;

@filler: @base * 2;

@other: @base + @filler;

-----------------------------------------

less的运算可以分辨出颜色和单位。

@var： 1px + 5；

less会输出6px；

-----------------------------------------

括号也允许使用：

width：( @var + 5) * 2;

 

7、color函数

less提供了颜色的运算函数，颜色会被转化成HSL色彩空间。

lighten( @color, 10%);

saturate (@color, 10%);

spin (@color, 10);

............

 

使用方式：

@base：#f04615;

.class {

         color:  saturate(@base,5%);

         background-color:  lighten(spin(@base, 8), 25%);

}

8、Math函数

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

round(1.67);  //returns '2'

ceil(2.4);    // returns '3'

floor(2.6);  // returns '2'

若想将一个值转化为百分比，可以使用percentage函数：percentage(0.5);  // returns '50%'

 

9、作用域

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

@var： red

 

#page {

         @var：white；

         #header{

                   color：@var；   //white

         }

}

#footer {

         color:@var;     //red

}

 

10、注释

CSS形式的注释在less中依然保留：

/*  Hello..........  */

less同样也支持双斜线的注释，但编译成CSS的时候会自动过滤掉：

// Hello..........

 

11、避免编译

如果需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法，可以在前面加上一个~。

.class {

         filter:~"ms:alwaysHasItsOwnSyntax.For.Stuff()";

}

输出结果：

.class {

         filter:  ms:alwaysHasItsOwnSyntax.For.Stuff();

}

 

12、JavaScript表达式

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

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

 

输出：@var："HELLO!";

 

                                                                           ——若想了解更多关于less的内容，

                                                                                    网址：http://www.bootcss.com/p/lesscss/#synopsis

                                                                                                http://www.lesscss.net/usage/