标签：
Sass与Compass 学习笔记
安装：
1、装sass之前先确认装了ruby ;
2、命令gem install sass *注一般不能正常安装
由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了，关于常用gem source命令可参看：常用的gem source
$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/
$ gem sources -l
*** CURRENT SOURCES ***
https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass
3、gem install compass
4、下载koala 百度搜索一下 这是一个很好的图形化工具，对于我们这种对window命令不喜欢的人来说很好用
Sass Css预编译器
强大的嵌套样式编写：
ul{
padding:0px;
li{margin:5px;float:left;_display:inline;}
}
编译后
ul{padding:0px;}
ul li{margin:5px;float:left;_display:inline;}
这写法看着就高大上，深深吸引了我！
通过@mixin 和 @include 重用代码块
@mixin border-style{
border:1px solid #ddd;
}
.a{
@include border-style;
}
.b{
@include border-style;
}
编译后
.a{
border:1px solid #ddd;
}
.b{
border:1px solid #ddd;
}
变量声明：$name:value;
图片精灵：Sprites此功能也深深吸引我，以前都是自己通过ps制作，很烦。当一个图标改变后更是死的心都有了，强烈推荐
@import "compass/utilities/_sprites";//引用精灵模块
$icons-layout:horizontal;//精灵排列形式
$icons-sprite-dimensions:true;//是否自动显示每个精灵的尺寸大小
@import "icons/*.png";//精灵图片icon文件（可惜现在只支持png格式图片）
@include all-icons-sprites;//自动生成所有精灵样式
下面我我自己demo
@import "compass/utilities/_sprites"; $icons-layout:horizontal; $icons-sprite-dimensions:true; @import "icons/*.png";
@include all-my-icons-sprites;
编译后
/* line 64, icons/*.png */
.icons-sprite, .icons-icona, .icons-iconb, .icons-iconc { background-image: url(‘/Images/icons-s64f5cf9f9c.png‘); background-repeat: no-repeat; }
/* line 84, C:/Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.icons-icona { background-position: 0 0; height: 32px; width: 32px; }
/* line 84, C:/Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.icons-iconb { background-position: -32px 0; height: 32px; width: 32px; }
/* line 84, C:/Program Files (x86)/Koala/rubygems/gems/compass-core-1.0.1/stylesheets/compass/utilities/sprites/_base.scss */
.icons-iconc { background-position: -64px 0; height: 32px; width: 32px; }
生成后的精灵图片
全部自动生成，而且还很多灵活的方法喜欢的可以自己去官网看看，真的不错！
标签：
原文地址：http://www.cnblogs.com/yc-code/p/4203083.html
