修改vim-zencoding对sass的支持

目前使用的zencoding(git仓库版本)已经增加了对sass的支持,但支持不够完美,例如输入 pos:a ,展开以后是 position:absolute。这样的代码是无法编译通过的,sass中要求:(冒号)后面必须有空格,也就是position: absolute这样的结果。只需要很简单的修改就可以。

具体方法如下:
修改 autoload/zencoding/lang/sass.vim 在 let text = substitute(text, '\s*;\ze\(\${[^}]\+}\)\?\(\n\|$\)', '', 'g') Lline:60 行后面添加一行 let text = substitute(text, ':', ': ', '') 保存再次打开即可。

[锋利web前端开发]sass小技巧图片版本号和绝对路径引用

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章

本篇讲解sass中的通过变量来控制图片版本号和路径。

版本号应用场景:背景图片更新过后,浏览器缓存了之前的背景图片,用户需要强制刷新浏览器才能看到最新更新。有时候这种情形是无法接受的,通过给背景图片添加一个get参数,使浏览器重新请求图片。修改$CVS变量,重新生成css文件就可以了。

绝对路径应用场景:ie6下面的AlphaImageLoader无法使用相对路径,手动编码在开发环境迁移到产品环境时可能因为路径改变而需要手动修改多处。sass中指定一个绝对路径的变量即可,在需要时修改变量,重新生成css文件就可以轻松维护。有些项目要求全部使用绝对路径,但开发的时候硬盘本地文件都是使用相对路径引用的。在上线前将变量修改为绝对路径,迁移到线上环境。

sass代码

$CVS: '2711'
$IMGURL: '../img'
$FULLIMGURL: '/public/img'

.test
  width: 120px
  height: 40px
  background: url(#{$IMGURL}/button.png?t=#{$CVS}) 0 0 no-repeat
  .ie6 &
    background-image: none
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{$FULLIMGURL}/img/button.png?t=#{$CVS}")

css代码

.test { width: 120px; height: 40px; background: url(../img/button.png?t=2711) 0 0 no-repeat; }
.ie6 .test { background-image: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/public/img/img/button.png?t=2711"); }

 

[锋利web前端开发]sass小技巧extend和include组合运用

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章

本篇讲解sass中的extend和include的运用

经常能看到某些网站的css中,将多个引用到同一个背景图片的样式定义在一处。例如淘宝的这段。

.search-panel button,
.search-panel-fields s,
.search-fix,
.help-guest a,
.product-list,
.tmall-interlayer-title,
.tmall-slide-left,
a.tmall-slide-left:hover,
.tmall-slide-right,
a.tmall-slide-right:hover,
.guang-topics ol,
p.hotsale-free-sent {
   background:url(http://img03.taobaocdn.com/tps/i3/T1ZeuRXaFtXXXXXXXX-300-429.png) no-repeat;
}

以传统的css开发方式,我们需要手动将引用这个背景图片的样式名整理在一起。下面看一种以sass实现的方式:

.Cbg_btn1
  background-image: url(../img/bg_btn1.png)
  _background-image: url(../img/bg_btn1.8bit.png)

@mixin bg_btn1($top: 0, $left: 0, $rep: no-repeat)
  @extend .Cbg_btn1
  background-position: $left $top
  background-repeat: $rep

.btn1
  +bg_btn1(-50px)
.btn2
  +bg_btn1(-100px)
.btn3
  +bg_btn1(-100px)
.Cbg_btn1, .btn1, .btn2, .btn3 { background-image: url(../img/bg_btn1.png); _background-image: url(../img/bg_btn1.8bit.png); }

.btn1 { background-position: 0 -50px; background-repeat: no-repeat; }

.btn2 { background-position: 0 -100px; background-repeat: no-repeat; }

.btn3 { background-position: 0 -100px; background-repeat: no-repeat; }

如果换成以sass代码的方式实现,再转换成css代码,就可以非常方便的在当前样式中引用这个背景图片。上例中还通过定义变量设定背景图片的版本号,在下次背景图片进行修改后,只需要更新变量重新生成css文件,就可以跳过用户浏览器的缓存,让修改即立刻呈现在用户面前。

[锋利web前端开发]索引贴

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

  1. haml/sass/coffee的安装(win平台)
  2. 使用vim插件autocommand进行整合开发
  3. sass小技巧extend和include组合运用
  4. sass小技巧图片版本号和绝对路径引用
  5. vim用autocommand插件编译coffee

[锋利web前端开发]haml/sass/coffee的安装(win平台)

锋利web前端为一个系列文章,分享利用python、vimscript等语言,整合haml、sass、coffee等实现快速前端开发。

可以到 [锋利web前端开发]索引贴 查看当前系列的所有文章

本篇主要讲解 haml/sass/coffee 在windows平台的安装

准备工作

下载ruby、devkit、nodejs等软件
ruby、devkit 等可在 http://rubyinstaller.org/downloads/ 下载鉴于国内网络情况此网址可以无法打开。附上备选方案
ruby http://rubyforge.org/frs/?group_id=167
devkit https://github.com/oneclick/rubyinstaller/downloads
也可上 http://ruby.taobao.org 上面下载。

继续阅读