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那是最顺手的。

Continue Reading
Front Tech

YAML对三栏布局中CSS浮动问题的解决

Preface Mentor在项目中提到一种叫做YAML的置标语言。在网上搜了一下,这是一种强调可读性,以数据为中心的置标语言,YAML的意思是YAML Ain’t a Markup Language(YAML不是一种置标语言),语法比较简单,Structure通过空格来展示。Sequence里的项用”-“来代表,Map里的键值对用”:”分隔,知道这几点就可以了,YAML比JSON还简单,借用官方的说法,是一种非常Friendly的格式。 很有趣的是我同时搜到了一个CSS框架,也叫YAML,不过这里是YAML是Yet Another Multicolumn Layout(另一个多栏布局)的缩写。本文主要针对的是后一个YAML,但不侧重于它的用法,而是学习它的写法。 YAML YAML又一次体现了德国人的严谨作风,它有一份优秀易读,循序渐进的文档,有良好的目录结构,详细的注释,兼容所有我能找到的浏览器(包括IETEST上的IE5.5),而且考虑到了对网页打印格式的兼容。 在继续以下的无聊内容之前,先来看一个有趣的东西,YAML的在线Builder,可以以所见即所得的制作样式,它可以使用YAML已所见即所得的方式生成可用的HTML+CSS。

Continue Reading