Sass

安装

• 安装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

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;