sass,compass让开发效率飞起_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了sass,compass让开发效率飞起_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3706字，纯文字阅读大概需要6分钟。
内容图文
最近开始学习并且使用，发现使用它写起css来真的是各种爽 安装sass，compass
- sass是依赖于ruby的，必须先安装Ruby，点击下载
- 下载完ruby之后，使用命令行安装sass gem install sass
- 使用命令，sass-v compass-v 查看是否安装成功
出现上图情况则为安装成功
sass的使用及优点
定义变量,数值计算（左边为scss文件，右边为编译之后的css文件）
方便知道谁是谁的子元素，不必写一大堆重复的标签
还可以像函数一样使用，可以传参数，可以设置默认参数
这还远远不够，如果sass不和compass一起使用，很难体现它功能的强大性
compass的使用
1.官方文档 http://compass-style.org/help/tutorials/production-css/
2.compass的特性
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）优点：
（3）官方文档 https://github.com/ksmandersen/compass-normalize
（4）安装 gem install compass-normalize
（5）使用方法
compass create
在config.rb 中添加 require'compass-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的文章，未完待续）
内容总结
以上是互联网集市为您收集整理的sass,compass让开发效率飞起_html/css_WEB-ITnose全部内容，希望文章能够帮你解决sass,compass让开发效率飞起_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。