安装
- 安装Ruby
ruby -v //检查ruby版本
//国内镜像
gem sources --remove https://rubygems.org/
gem sources -a http://ruby.sdutlinux.org/
gem sources -l//查看源
gem list//列出所有ruby程序包
gem update//一段时间后若需更新ruby
- 安装sass
gem install sass
sass -v
gem install sass --version=3.3.0//安装特定版本
gem uninstall sass --version=3.3.0//卸载
sass-convert main.scss main.sass//转换两种语法格式
以下划线开头的sass文件是局部文件，不会被单独编译成css，但是可以被引入到其他sass文件中。被引入时不必加下划线。
- 安装Compass
Compass是在sass的基础上二次开发的css框架
gem install compass
compass create//创建compass工程
//两种编译方法
compass compile//按需编译
compass watch//实时编译
Sass语法
-
变量
$符号开头命名 -
注释
//编译后被忽略
/**/
在compressed风格下各种注释都不存在
/ * ! */这种保留 -
关于@import
css的@import弊端：
1.放在代码最前边，否则不起作用
2.对性能不利。a引用b，浏览器下载a后，解析渲染过程中读到a中的import时才下载b，浏览器处于阻塞的过程，大大延长渲染时间。 - scss在编译时合并被引入文件，并输出到css文件，import可放在任何地方。
使用css原生@import的既定规则：
1.当@import后边跟的文件名是以.css结尾的时候；
@import "main.css";
2.当@import后边跟的是http://开头的字符串的时候；
@import "http://main.css";
3.当@import后边跟的是一个url（）函数的时候；
@import url(main.css);
4.当@import后边带有media queries的时候。
@import "main.css" projection tv;
- 后面讲compass时会讲插件机制用Normalize来替换激进的reset。
- sass语法指南
Compass
模块
reset--------- 需单独引入
css3
layout-------- 页面布局控制能力，需单独引入
typography
utilities------- 很多mixin
helpers-------内含一系列函数，不常用
Browser support--------默认支持的浏览器
reset
用normalize代替
gem install compass-normalize//也可到官网下载normalize
然后再config.rb文件中添加require 'compass-normalize'
-
normalize模块：
- base、html5，links、typography、embeds、groups、forms、tables
- 引入子类时首先写@import "normalize-version";
-
Layout
使用率低- grid-background
- sticky-footer
stretching
CSS3
已经引入support模块
查看支持的浏览器：@debug browsers（）；
命令行：
compass interactive
browsers();
browser-version(chrome);
指定支持的浏览器和最低版本号
$supported-browsers:chrome;
$browser-minimum-versions:("ie":"8");
- Typography
@include ellipsis();
//firefox的低版本对text-overflow的支持不好的解决办法
compass install compass/ellipsis
$use-mozilla-ellipsis-binding: true;
