less.js的使用---初次使用

第一次接触less.js；

我使用eclipse开发的，eclipse好像没有什么关于他的插件。

①：使用时我们创建一个.less文件。

示例一个

@color: pink,yellow,red;

div1{
    background-color:extract(@color,2);
}
//这段代码div1的背景色就是yellow，括号里面的参数第一个代表自己声明的变量
//这个变量可以是一个，也可以是一个数组，如果不是数组，那么括号里面的参数只有一个就行；
//如果是数组那么第二个代表他的下标，注意这个下标是从1开始的

②：将自己创建的.less文件引入，和引入css一样的方式，但是注意标签内的 rel="stylesheet/css"要改为rel="stylesheet/less"，不然程序会将这个.less文件作为.css文件引用。

③：在脚本里加上这段代码

<script type="text/javascript">
 less.modifyVars({
            '@index': 2    //可以在html中设置less中的变量，如果设置了，则优先用我们这里设置的
        })
</script>

④：直接在eclipse中引用官方的less文件。注意要放在声明的less下面引入，这个是在线的一个地址

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

//less文件中
@index:2;  /*默认为2，如果html中有对其设置，那么要用html中设置的*/
//css变量数组
@bodybackcolor:transparent,pink,yellow;

.userthinfo{
background-color: extract(@bodybackcolo,@index); /*这就代表背景色是pink的*/
width: 12%;
}

学习中，持续更新...