Front Python

在Django中使用LESS

上次振宇介绍duoshuo的开发,前台用的是backbone和LESS,backbone很久之前mentor就提到过,当时没弄懂,等下周休息的时候抽空学学,LESS倒是没什么学习成本。

LESS一种动态样式语言,简单来说就是对CSS语言的扩展,可以类比于coffeescript对javascript提炼。我因为javascript写习惯了,转到coffeescript效率不升反降。但用LESS重写了几个CSS文件,绝对是快了很多。因为LESS没有改变CSS的写法(唯一变化的是注释可以用//了),所以没有转换障碍。LESS拥有语言的特征,例如变量、函数、命名空间等,和只是样式表的CSS比起来灵活了许多。

在前台使用LESS的方式和coffeescript很像,也是载入一个js文件用来处理less后缀的文件,将其转换成CSS。

当然如果真这么处理,就和Django没什么关系了,我一般是在模板里直接用{%block style%}写CSS样式,所以如果能自定义一个templatetag,直接在里面写LESS那是最顺手的。

Install

大致的思路是在Django中制作一个模板标签,调用lessc命令处理其中的语句。所以先装上nodejs,用nodejs的npm工具安装less,完成后建立一个软链接以便直接使用lessc命令。

wget http://nodejs.org/dist/v0.6.5/node-v0.6.5.tar.gz
tar xzvf node-v0.6.5.tar.gz
cd node-v0.6.5/
./configure
make
make install
npm install less
ln -s ~/node-v0.6.5/node_modules/less/bin/lessc /usr/local/bin/lessc

Django Template Tag

思路很简单,用Python的NamedTemporaryFile和shlex,把自定义tag中的LESS代码写入一个临时文件,用shlex执行lessc来解析,获得返回的内容输出到模板就可以了。

除了lessc是执行业务逻辑的代码以外,其他的都是定义template tag用的固定代码,所以也就没必要写注释了,详细解释可以参考官方文档

Usage

把以上代码存为less.py文件,放到应用下的templatetag目录中,然后载入它,例如:

实际输出的CSS:

Afterword

写完以后准备提交到github,发现已经有一个名为django-less的项目了,不止有template tag,还可以直接解析.less文件,从它的安装说明推断,应该也是直接用lessc命令来实现的,所以如果像我一样只需要tag就没必要装了,顺便以同样的方法写了coffeescript的tag,没准以后用得上。如果对静态文件处理的需求比较复杂,还可以用django-assets来进行处理。LESS还有很多有趣的特性,以后写CSS又多了很多简单的写法,不会那么无聊,只能一段一段的复制粘贴了。

2 thoughts on “在Django中使用LESS”

Leave a Reply

Your email address will not be published. Required fields are marked *