Tagged with " sass"
Mar 13, 2014 - 前端    No Comments

scss2sass

首先必须用gem装好sass,单单装好compass.app可以帮你编辑sass没用的。

$ sudo gem install compass

然后进入到项目文件夹下

Screen Shot 2014-03-13 at 3.50.55 PM

在命令行运行:

sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

scss文件就会被转换成sass的语法格式了

Oct 11, 2013 - 前端    No Comments

clearfix的前世今生

在很久很久以前,清除浮动这个问题一直困扰着我。直到我写出这样一行代码。

.auto_height { 
  height:auto !important; 
  height:100%; 
  min-height:0px; 
  overflow:hidden; 
  _overflow:inherit;
}

这行代码兼容ie6,ie7,firefox2,firefox3。那个年代还没有chrome,还没有css3。我还在用着我的iphone1。那是一个兼容ie6是理所当然的年代。

直到有一天,我遇到了drupal6,发现自己的代码虽然管用,但看上去总是那么的土鳖。那个时候clearfix还不叫clearfix,叫clear-block

/*
** Markup free clearing
** Details: http://www.positioniseverything.net/easyclearing.html
*/
.clear-block:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clear-block {
  display: inline-block;
}

/* Hides from IE-mac \*/
* html .clear-block {
  height: 1%;
}
.clear-block {
  display: block;
}
/* End hide from IE-mac */

看看人家的注释多么的高端洋气!
Read more »

Feb 3, 2013 - 前端    No Comments

2个应该加入base.sass的属性

/* 解决chrome 12像素字体大小限制 */
body
  -webkit-text-size-adjust: none

/* 解决link点击后周围一圈虚线的问题 */
a
  blr: expression(this.onFocus=this.close())
  blr: expression(this.onFocus=this.blur())  
a:focus
  -moz-outline-style: none
  outline: none
Aug 6, 2012 - mac, 前端    No Comments

install sass and compass with gem

工作最先要用到是sass和compass

sass compass 都依赖ruby,先看一下10.8是否默认装好了ruby

$ ruby --version

ruby 1.8.7 (2012-02-08 patchlevel 358) [universal-darwin12.0]

看来ruby在apple的眼里比java的地位高

再看一下gem是否默认安装好了

$ gem list

*** LOCAL GEMS ***

list是空的,可以直接安装compass了,compass会把sass一起装好

$ gem install compass

ERROR: While executing gem … (Gem::FilePermissionError)

You don’t have write permissions into the /Library/Ruby/Gems/1.8 directory.

看来要sudo 提权限

compass 装好了,把compass的app拷回来就可以用了