less.js 使用

关于less.js 一直认为是个钻了牛角尖的东西，被迫在项目利用了一段时间发现我错了。所以总结下

less文件demon

#header {
    .red;
    .a_line;
    a{ color: #000000;}
    span {
        font-size: 14px;
        color: #0F0;
    }
    .logo {
        width: 300px;
        &:hover {
            text-decoration: none
        }
    }
}


.red (){
    color: red;
    .co{ border: 1px solid red;}
}

.a_line(){
a:focus { outline:0;}
a{blr:~"expression(this.onFocus=this.close())";} // 只支持IE，过多使用效率低 
 a{blr:~"expression(this.onFocus=this.blur())";} // 只支持IE，过多使用效率低 
 a:focus { -moz-outline-style: none; } // IE不支持 
 a{ text-decoration: none}
}

 less的优点

1.清晰的css逻辑结构，使处于#header选择器的css样式全部写在#header样式块中。

2.样式变量，less官网称为混合模式

其中.red (){ color: red; .co{ border: 1px solid red;} }与.red { color: red; .co{ border: 1px solid red;} }的写法，与效果是有本质区别的。

.red (){ color: red; .co{ border: 1px solid red;} } 相当建立了个样式变量，不会再css中显示，不会直接起作用，类似于未实例化。 只有在.class{}中调用才会起作用。调用的效果为.class{color: red; .co{ border: 1px solid red;}}这就防止了废弃不被使用css样式

.red {color: red; .co{ border: 1px solid red;}}是一个已经起作用的类，在.class{}中调用效果为 .class{color: red; .red{.co{ border: 1px solid red;}}}。

 

less官网自带winless一个将less自动生成css的工具，会自动监控指定的less文件，只要文件被更改就会自动更新生成新的被压缩的css文件。