注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

[快速开发工具]LESS,提升CSS编写速度(一)  

2015-11-27 12:16:05|  分类: 前端工具 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
如何使用LESS,先从工具上说吧。
工具一:Node.js
首先你得安装Node.js,百度一下,直接安装,然后打开cmd命令执行 npm install -g less安装LESS,安装完毕后,就可以开始使用LESS开发了
用你的编译器新建less文件,html还是一样引用CSS,然后就是cmd命令窗口需要先定位到你的资源目录下,不知道怎么定位的请阅读一分钟学会入门大部分基于Nodejs的工具最后在执行编译代码

lessc test.less test.css

就可以自动生成相应的CSS文件了(CSS文件不用自己新建,会自动生成)。
比如我的项目在E盘demo-less下
[快速开发工具]LESS,提升CSS编写速度(一) - 叶落非殇 - 叶落非殇
 
那么我可以定位到demo-less文件夹下,之后再执行

lessc css/test.less css/test.css

或者定位到LESS文件目录下,直接执行

lessc test.less test.css

[快速开发工具]LESS,提升CSS编写速度(一) - 叶落非殇 - 叶落非殇

  这样使用缺点明显,每次都要执行一次指令,很麻烦。
工具二:koala(推荐)
  这个工具就不多介绍,直接下载安装,把项目拖进去,然后编辑LESS,每次保存就会自动刷新CSS文件,也不需要手动新建CSS文件。非常方便!

——————————————————————正题分割线——————————————————————
一、变量声明:
语法:@a: 1px;

        变量声明与JS预编译机制类似,也有全局变量和局部变量只分,但预编译期会先行对变量进行声明并顺序赋值(JS预编译期不会进行赋值),后面的值会覆盖前面的值。
        颜色变量也支持运算符运算。

二、混合(快速调用)
    1、不带参数的混合
语法: 
// 清浮动
.ellipsis {
    display: block;
    height: 0;
    content: "\200B";
    clear: both;
}
.test:after {
    width: 200px;
    .ellipsis; //快速调用事先写好的ellpsis清浮动
}
    2、带参数的混合(声明函数)
语法:
// 圆角函数
//@radius声明了一个变量,默认参数为5px;
.radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}
//test调用radius函数未传参,使用默认5px参数
.test {
    width: 200px;
    height: 100px;
    background-color: #f00;
    .radius;
}
//test1调用。radius函数,传入10px,变量@radius值变成10px。
.test1 {
    width: 200px;
    height: 100px;
    background-color: #f00;
    .radius(10px);
}

小技巧:
        很多人觉得LESS毕竟是自动生成,代码冗余比手写多,个人觉得其实这是一个天大的错误,LESS可以用普通CSS语法去支持(特殊的地方LESS有提供方法避免LESS的编译),换句话说就是,不方便的地方,你完全可以当做普通CSS文件去编辑,而LESS提供了一系列方便的方法,二者结合代码冗余又少,代码书写速度也能有明显提升,比如上面不带参数的混合这个例子,如果你按照这种写法,保证会冗余一些,但如果你换一种写法,写成第二种函数类型的,就不会有冗余。
// 清浮动
//优化,将ellipsis写成函数类型,这样在CSS文件中就不会生成多余的.ellipsis累
.ellipsis() {
    display: block;
    height: 0;
    content: "\200B";
    clear: both;
}
.test:after {
    width: 200px;
    .ellipsis; //快速调用事先写好的ellpsis清浮动
}
    
    3、多变量传参(还是函数)
    多变量用英文";"号或",号"隔开,如: .show(@padding; @margin: 2;)  .show(@padding, @margin: 2;)
           3.1、 @arguments 变量
                    @arguments与JS中argument类似,都是传入的参数。示例:
//...表示允许接受N个参数,如果不写...参数内容将被限制,详见下一条
.shadow(...) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    -ms-box-shadow: @arguments;
    -o-box-shadow: @arguments;
    box-shadow: @arguments;
}
    
   4、参数的用法和@rest变量
如果需要在 mixin 中不限制参数的数量,可以在变量名后添加 ...,表示这里可以使用 N 个参数。
.mixin (...) {        // 接受 0-N 个参数
.mixin () {           // 不接受任何参数
.mixin (@a: 1) {      // 接受 0-1 个参数
.mixin (@a: 1, ...) { // 接受 0-N 个参数
.mixin (@a, ...) {    // 接受 1-N 个参数
        @rest变量用法
.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的参数
    // @arguments 表示所有参数
}
    5、!important关键字
LESS支持!important,在语句后面加!important会自动给相应的CSS内容后面添加!important。

未完待续。。。。。。
  评论这张
 
阅读(24)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017