Posted by:
努力记

努力记,通过记录,计划,让自己的努力可以触碰彩虹!

2,366

Node.js:LESS

  • 2013-12-22
  • 暂无评论

LESSCSS

  • 是一种动态样式语言
  • 属于CSS预处理语言的一种
  • 它使用类似CSS的语法
  • 为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等
  • 更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。

可以编译成CSS文件,也可以直接使用实现动态编译(但对性能会有影响)

Bootstrap就是使用LESS来生成所使用的CSS样式文件

LESS官方通过Node.js的模块进行发布的,配合使用Node.js下的构建工具,可谓一举两得

还有很多第三方的GUI编译器可以选择

  • koala(Win/Mac/Linux) 国人开发的LESSCSS/SASS编译工具。下载地址:http://koala-app.com/index-zh.html
  • Codekit(Mac) 一款自动编译Less/Sass/Stylus/CoffeeScript/Jade/Haml的工具,含语法检查、图片优化、自动刷新等附加功能。下载地址http://incident57.com/codekit/
  • WinLess(Win) 一款LESS编译软件。下载地址http://winless.org/
  • SimpleLess(Win/Mac/Linux) 一款LESS编译软件。下载地址http://wearekiss.com/simpless

开始使用LESS

1.Node.js库

使用时,首先全局安装less(部分系统下可能需要在前面加上sudo切换为超级管理员权限):

npm install -g less

接下来就可以使用lessc来编译.less文件了:

lessc example/example.less example/example.css

更多选项可以直接运行lessc查看说明。

2.浏览器端使用 (动态编译)

下载LESSCSS的.js文件,例如lesscss-1.4.0.min.js。
在页面中引入.less文件

<link href="example.less" rel="stylesheet/less" /> <!--需要注意rel属性的值是stylesheet/less,而不是stylesheet-->

引入第1步下载的.js文件

<script type="text/javascript" src="lesscss-1.4.0.min.js"></script>

需要特别注意的是:

  1. 由于浏览器端使用时是使用ajax来拉取.less文件,因此直接在本机文件系统打开(即地址是file://开头)或者是有跨域的情况下会拉取不到.less文件,导致样式无法生效。
  2. 还有一种情况容易导致样式无法生效,就是部分服务器(以IIS居多)会对未知后缀的文件返回404,导致无法正常读取.less文件。
    1. 解决方案是在服务器中为.less文件配置MIME值为text/css(具体方法请搜索)。或者还有一种更简单的方法,即是直接将.less文件改名为.css文件即可。


back up ↑

无觅相关文章插件,快速提升流量