使用less以及相关工具
2012-03-12 20:02
323 查看
最近开始试着使用less(http://lesscss.org,外国的链接被墙了,中文的在这里:http://www.lesscss.net/)。它可以帮助我们更有效率的写css。还有其它的实现,如:sass(http://sass-lang.com/tutorial.html)。
(一)简介
简单说,less让css变得有些像一门”真正的“编程语言,支持变量定义、运算、函数等等特性。而且,还可以直接在less中调用js的函数。使用它的方法的话,一般有2种。
1)可以选择在页面直接包含.less的文件,然后使用一个js来对它进行处理(编译),处理后就是真正的css文件了。如:
2)开发阶段使用less编写,发布时,将它编译为css再发布。这就需要less的”编译器“了,如果有装nodejs的话,可以直接将它安装成node的模块。(详细介绍,见官网)
(二)语法(完全参考自http://www.lesscss.net/,那里更详细)
1.注释
2.变量定义及计算
3.混合(mixin)
4.嵌套
5.字符串插值
还有,另外一种写法是这样(使用类似函数的%):
6.导入其它文件
7.命名空间
(三)相关工具
由于我主要使用windows,就在找windows平台下的less”编译器”,结果找到了2个实现。
1)https://github.com/cloudhead/less.js/ 这个是使用windows host script来实现的。下载后将其路径加到path里,就可以使用命令行:lessc input.less [output.css] [-compress]来调用了。
2)http://leafo.net/lessphp/ 这个是使用php实现的,需要php支持。下载后将其路径加到path里,同时可以在其目录下建一个plessc.bat的批处理文件,添加这样的代码:
%~dp0展开后是当前批处理文件所在目录,%*则是传给该批处理文件的所有参数。上面的代码就是用php来运行plessc这个文件,并且传入所有额外的参数。这样,我们就可以很方便的使用命令行像这样来使用:plessc input.less > output.css。更多用法见这里:http://leafo.net/lessphp/docs/。
折腾完“编译器“后,就要开始折腾工具对less的支持了。
1.由于我主要使用vim,就开始找vim上的less语法插件,结果居然没有~本着”自己动手,丰衣足食”的精神,我就参考着scss和css的语法文件,写了一个less的语法插件。下载在这里:http://www.vim.org/scripts/script.php?script_id=3964。
这个语法插件是自己第一次写插件,必然会有很多问题,以后慢慢来完善。在写这个语法文件时,遇到的主要问题是:实在是不知道怎么准确定义less的mixin和namespace,因为它们和css的class选择器、id选择器、子元素选择器实在是太像了。我的解决方法是:1)不定义mixin的声明部分,让它和class选择器的颜色一致(因为个人理解,mixin其实就很类似一个class,一样可以重用很多次,而且可以带参数重用),然后对mixin的使用部分,定义为和css的属性的颜色一致以示区分。2)让namespace的#namespaceName部分和id选择器的颜色一致,后面的部分就和mixin颜色一致。最后就是这样的颜色:
2.文件有了一定的颜色后,看起来舒服多了。不过,自动缩进的话,其实还是比较差(这个后面再研究怎么写缩进插件)。重要的是能不能让less“编译”为css的过程自动化呢?使用vim的话,当然是可以的。
上面的2种实现,我选择的是windows host script的实现方式。然后,我在自己的vimrc里面加入了这样的代码:
这样子,就可以在写入less文件时,自动调用lessc来编译less文件了。(不过,好像更牛的方法是可以监视less文件的改变,改变时就编译,这个貌似php的实现有提供命令。我觉得在保存时就编译比较自然,就选择了这个方法。)
总体说来,用less写代码还是比较爽的,大家可以试试。挺有意思的。
(一)简介
简单说,less让css变得有些像一门”真正的“编程语言,支持变量定义、运算、函数等等特性。而且,还可以直接在less中调用js的函数。使用它的方法的话,一般有2种。
1)可以选择在页面直接包含.less的文件,然后使用一个js来对它进行处理(编译),处理后就是真正的css文件了。如:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
2)开发阶段使用less编写,发布时,将它编译为css再发布。这就需要less的”编译器“了,如果有装nodejs的话,可以直接将它安装成node的模块。(详细介绍,见官网)
(二)语法(完全参考自http://www.lesscss.net/,那里更详细)
1.注释
/*这个注释,编译会仍然保留*/ //这个注释,编译后会被去掉
2.变量定义及计算
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 编译后为=> #header { color: #6c94be; }
3.混合(mixin)
.border-radius (@radius: 1px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } .button { .border-radius(6px); } 编译后为=> .button { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
4.嵌套
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; &:hover { text-decoration: none; } } } 编译后为=> #header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; } #header .logo:hover { text-decoration: none; }
5.字符串插值
@base-url: "http://assets.fnord.com"; background-image: url("@{base-url}/images/bg.png"); 编译后为=> background-image: url("http://assets.fnord.com/images/bg.png");
还有,另外一种写法是这样(使用类似函数的%):
.gradient (@start_color, @end_color) { filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=@{start_color}, endColorstr=@{end_color})"; -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start_color, @end_color); }
6.导入其它文件
@import "lib.less"; //还可以不带后缀: @import "lib"; //导入一个CSS文件而且不想LESS对它进行处理 @import "lib.css"
7.命名空间
#bundle { .button () { display: block; border: 1px solid black; background-color: #ddd; &:hover { background-color: white; } } } #header a { color: orange; #bundle > .button; } 编译后为=> #header a { color: orange; display: block; border: 1px solid black; background-color: #ddd; } #header a:hover { background-color: white; }
(三)相关工具
由于我主要使用windows,就在找windows平台下的less”编译器”,结果找到了2个实现。
1)https://github.com/cloudhead/less.js/ 这个是使用windows host script来实现的。下载后将其路径加到path里,就可以使用命令行:lessc input.less [output.css] [-compress]来调用了。
2)http://leafo.net/lessphp/ 这个是使用php实现的,需要php支持。下载后将其路径加到path里,同时可以在其目录下建一个plessc.bat的批处理文件,添加这样的代码:
@echo off php %~dp0plessc %*
%~dp0展开后是当前批处理文件所在目录,%*则是传给该批处理文件的所有参数。上面的代码就是用php来运行plessc这个文件,并且传入所有额外的参数。这样,我们就可以很方便的使用命令行像这样来使用:plessc input.less > output.css。更多用法见这里:http://leafo.net/lessphp/docs/。
折腾完“编译器“后,就要开始折腾工具对less的支持了。
1.由于我主要使用vim,就开始找vim上的less语法插件,结果居然没有~本着”自己动手,丰衣足食”的精神,我就参考着scss和css的语法文件,写了一个less的语法插件。下载在这里:http://www.vim.org/scripts/script.php?script_id=3964。
这个语法插件是自己第一次写插件,必然会有很多问题,以后慢慢来完善。在写这个语法文件时,遇到的主要问题是:实在是不知道怎么准确定义less的mixin和namespace,因为它们和css的class选择器、id选择器、子元素选择器实在是太像了。我的解决方法是:1)不定义mixin的声明部分,让它和class选择器的颜色一致(因为个人理解,mixin其实就很类似一个class,一样可以重用很多次,而且可以带参数重用),然后对mixin的使用部分,定义为和css的属性的颜色一致以示区分。2)让namespace的#namespaceName部分和id选择器的颜色一致,后面的部分就和mixin颜色一致。最后就是这样的颜色:
2.文件有了一定的颜色后,看起来舒服多了。不过,自动缩进的话,其实还是比较差(这个后面再研究怎么写缩进插件)。重要的是能不能让less“编译”为css的过程自动化呢?使用vim的话,当然是可以的。
上面的2种实现,我选择的是windows host script的实现方式。然后,我在自己的vimrc里面加入了这样的代码:
"编译当前less文件,保存为同名的css文件,将错误echo显示 func! CompileLess() let l:filePath = shellescape(expand("%:p")) let l:outputFilePath = shellescape(expand("%:p:r") . ".css") let l:cmd = "lessc " . l:filePath . " " . l:outputFilePath let l:errs = system(l:cmd) echo l:errs endfunc " 自动编译less autocmd! BufWritePost,FileWritePost *.less call CompileLess()
这样子,就可以在写入less文件时,自动调用lessc来编译less文件了。(不过,好像更牛的方法是可以监视less文件的改变,改变时就编译,这个貌似php的实现有提供命令。我觉得在保存时就编译比较自然,就选择了这个方法。)
总体说来,用less写代码还是比较爽的,大家可以试试。挺有意思的。
相关文章推荐
- Linux环境下node.js环境的搭建以及配置,使用node.js编写工具与简化less编译
- Windows Mobile开发中Visual Studio以及相关工具的使用
- 介绍内容有 Android 开发规范, 架构, 布局技巧, 以及使用一些有助于快速开发相关工具等等
- Linux 查看磁盘分区、文件系统、使用情况的命令和相关工具介绍
- 树莓派入手,相关设置以及使用迅雷远程下载
- sql prompt工具安装以及注册使用教程
- Bluez相关工具的使用
- Silverlight游戏设计(Game Design):(十四)练习用游戏素材资源的获取及相关工具使用心得
- mysql的相关命令以及jdbc的使用
- C#之中SqlCommand以及相关函数的使用
- 【敏捷实用工具】JIRA介绍以及使用方法
- 浅谈使用Fiddler工具发送post请求(带有json数据)以及get请求(Header方式传参)
- Linux 查看磁盘分区、文件系统、使用情况的命令和相关工具介绍
- 教你如何在Oracle官网免登陆下载oracle数据库以及相关工具
- Wireshark抓包工具使用教程以及常用抓包规则
- android多分辨率适配以及apk小工具及相关源码
- Wireshark抓包工具使用教程以及常用抓包规则
- geopandas 的使用以及相关问题
- 用iBator工具生成Ibatis相关类包,其中Example类文件的Criteria类无法使用的问题
- 安卓自动化测试工具MonkeyRunner之使用ID进行参数化,以及List选择某项和弹出框点击确定的写法