sass,compass让开发效率飞起

最近开始学习而且使用，发现使用它写起css来真的是各类爽

安装sass，compass

1. sass是依赖于ruby的，必须先安装Ruby，点击下载
2. 下载完ruby以后，使用命令行安装sass        gem install sass
3. 使用命令，sass-v    compass-v   查看是否安装成功

   

　　　出现上图状况则为安装成功

---

 

sass的使用及优势

• sass官网： http://www.w3cplus.com/sassguide/
• api文档   http://sass-lang.com/documentation/file.SASS_REFERENCE.html
• sass功能：

定义变量,数值计算（左边为scss文件，右边为编译以后的css文件）

方便知道谁是谁的子元素，没必要写一大堆重复的标签

还能够像函数同样使用，能够传参数，能够设置默认参数

这还远远不够，若是sass不和compass一块儿使用，很难体现它功能的强大性

compass的使用

1.官方文档 http://compass-style.org/help/tutorials/production-css/

2.compass的特性

• 轻松实现浏览器兼容
• 全面支持css3
• 提供海量使用功能，颜色处理，获取客户端数据等
• 轻松实现扩展

3.经常使用功能：

 1.@import（合并css文件，实现模块化）

能够将项目中的各部分样式拆分红 _head.scss,_body.scss,_foot.scss    (注意！要以_开头，这样子这些文件便不会被编译成css文件)

实现效果

使用方法，在main.scss中，加入如下代码

1 @import "base/head";
2 @import "base/body"; 
3 @import "base/foot";

执行编译，便可实现

2.css3兼容性

      

无需每次都重复写多个浏览器前缀，只需在前面写上 @include  （这里用正常的css3方式写）

3.合并雪碧图

说明：CSS雪碧图是将几个图片拼合成一张图片，以此来减小HTTP请求的方法，而且能够提高网站加载速度

目录结构以下：share目录下放未经合并的图片，在images目录下的图片即为合并以后的图片

使用方法：

在share.scss中输入如下3行代码

1 @import "compass/utilities/sprites";   
2 @import "share/*.png";   　　　　//注意这里的路径，*表示匹配全部png格式的图片
3 @include all-share-sprites;   //中间的share为存放未合并文件的目录名字，

再执行编译便可，效果图以下，随便测试的，有点丑嘿嘿

而且，在share.css文件中，还将图片的位置都计算好了，使用起来很是的方便，以下

出现过的bug：

1 error sass/screen.sccc (c:/Ruby22-x64/lib/ruby/gems/2.2.0/compass-1.0.3/lib/compass/sass_extensions/functions/sprite.rb:137:in 'sprite_does_not_have_parent':undefined 'parent' for nil:NilClass)

解决方法：    图片名字，不要有数字，中文之类的

4.浏览器Normalize.css（解决各类浏览器样式不统一的问题）

（1）说明：Normalize.css是一种CSS reset的替代方案。

（2）优势：

• 保护有用的浏览器默认样式而不是彻底去掉它们
• 通常化的样式：为大部分HTML元素提供
• 修复浏览器自身的bug并保证各浏览器的一致性
• 优化CSS可用性：用一些小技巧
• 解释代码：用注释和详细的文档来

（3）官方文档 https://github.com/ksmandersen/compass-normalize

（4）安装    gem install compass-normalize

（5）使用方法

• 新建立一个项目

compass create <my_project> -r compass-normalize --using compass-normalize

• 在已经存在的项目添加

在config.rb 中添加    require'compass-normalize'

• 使用规范化的插件，只须要引入     @import "normalize"; //这个为所有引入

　正常状况下是选择须要的模块，单独引入，防止代码冗余，以下

1 @import 'normalize/html5';
2 @import 'normalize/base';
3 @import 'normalize/links';
4 @import 'normalize/typography';
5 @import 'normalize/embeds';
6 @import 'normalize/groups';
7 @import 'normalize/forms';
8 @import 'normalize/tables';

scss编译，compass编译

 说了这么多，还差编译

1.使用可视化工具编译      例如：koala   （实时编译，可压缩，支持多语言，使用简单）

下载地址，点击下载

2.使用命令行

建立一个工程       compass create myproject  点击进入建立的目录，出现如下3个文件

 编译   　　　　　compass compile   （在项目根目录下使用，将sass目录中的文件编译成css，css的路径为在config.rb配置的css-dir）

经常使用命令行以下

3.使用前端自动化工具 gulp  

（接下来会写一篇gulp的文章，未完待续）