Sass和Compass学习笔记（1）

为什么要学习Sass和Compass

简单来说，主要目标：

• 使用Sass和compass可以写出更加优秀的CSS
• 可以解决CSS编写过程中的一些痛点问题，如精灵图合成sprite 等
• 能够有效的组织样式，图片，字体等项目元素

当然前提是你要首先会写CSS，要不然也不会写出好的Sass和compass，不过也不排除意外。

那么到底哪些人需要来学习sass和compass呢

• 担任重构工作的同学，写很多CSS，不知如何自动化.
• 前端JS工程师，希望在项目周期内更好组织项目内容。

Sass的工作流程

• 首选第一步编写后缀为.scss或者.sass的代码文件，这里为什么会有两种不同的后缀命名方式呢，这要和sass的历史和CSS3的发展有关.最早的sass文件都是以.sass为后缀文件，随着CSS3的发展Sass加入了.scss的类似CSS代码编写风格的文件。
• 通过Sass引擎compass编译生成后缀为*.css文件最后将样式代码Deploy到代码仓库（git或者github）上，生成静态页面网页呈现。

---

sass语法分类

.Sass语法

h1
    color: #000
    background: #fff;

.Scss语法

h1{
    color: #000;
    background: #fff;
}

注意：一个项目中可混合使用两种语法，但不能在一个文件中使用两种语法

Sass和compass安装

由于Sass底层开发环境是由Ruby开发的，所以需要部署安装Ruby进行Sass的安装和编译使用，下面介绍一下Ruby的安装。

注意：这里说明一点，由于中国网络的限制，一般Ruby的安装是需要翻墙的，具体怎么翻，相信大家都有自己的方法，网上也可以搜到很对，这里就不做介绍了

Ruby的安装

登录Ruby的官方网站http://www.ruby-lang.orrg/en/进行下载安装，可以下载Mac,Linux,Windows 版本，这里讲一下Windows版本的安装，其他操作系统类似。

安装Ruby,选择文件目录，注意添加Ruby的执行程序到你安装的路径中。

查看Ruby版本号

Ruby -v

这里同样由于网络原因，需要将Amazon上的Ruby资源路径换成国内淘宝Ruby资源路径

执行

gem sources --remove https://rubygems.org/ //移除原来资源文件
gem sources -a https://ruby.taobao.org/ //换成淘宝资源

安装Sass和文件创建

gem install sass

同时可以指定sass安装版本号3.3

gem install sass --version=3.3

卸载指定版本

gem uninstall sass --version=3.30 

新建一个名为learn-sass-cli的文件

mkdir learn-sass-cli //创建文件
cd learn-sass-cli/  //进入文件目录
echo off >main.scss //新建main.scss文件
sass main.scss mian.css //将main.scss文件编译成main.css文件

打开main.scss文件，输入简单的全局设置样式

*{
    margin: 0;
    pading: 0;
}

编译生成的文件目录如下所示

其中.sass-cache是一个编译缓存文件，main.scss是一个sass文件，main.css.map是一个映射文件，main.css便是最终编译生成的样式文件。

至此sass的安装和文件创建便完成了，下面介绍compass的安装和创建

compass安装和文件创建

comapss安装类似sass

gem install compass
compass -v //查看版本号

创建workspace工作文件

mkdir workspace
cd workspace/
compass create learn-compass-init //创建compass文件

实时监听文件变化

cd learn-compass-init/
compass watch

workspace工程目录如下所示

在sass目录下新建一个存放变量的_variable.scss文件
分别定义headline-ff和main-sec-ff两个字体变量，输入相应的字体内容：

$headline-ff: Braggadocio, Arial, Verdana, Helvetica, scans-serif;
$main-sec-ff: Arial, Verdana, Helvetica, scans-serif;

之后在screen.scss文件中导入该文件和系统自定义的样式重置文件，screen.scss 称为“宿主文件”：

@import "variable", "compass/reset";

注意：这里的@import不同于CSS原生的@import,CSS中原生的@import指令有两大弊端，1，@import始终要放在代码的最前面2，对性能不利

编写主题样式和页面主题样式

//主标题样式
.headline{
    font-family: $headline-ff;
}

/* 页面主题内容样式 */
.main-sec{
    font-family: $main-sec-ff;

    .headline{
        font:{
            family: $main-sec-ff;
            size: 16px;
        }
    }

    .detail {
        font-size: 12px;
    }
}

在screen.css文件中编译生成的代码如下：

/* line 25, ../sass/screen.scss */
.headline {
  font-family: Braggadocio, Arial, Verdana, Helvetica, scans-serif;
}

/* 页面主题内容样式 */
/* line 30, ../sass/screen.scss */
.main-sec {
  font-family: Arial, Verdana, Helvetica, scans-serif;
}
/* line 33, ../sass/screen.scss */
.main-sec .headline {
  font-family: Arial, Verdana, Helvetica, scans-serif;
  font-size: 16px;
}
/* line 40, ../sass/screen.scss */
.main-sec .detail {
  font-size: 12px;
}

上面代码中使用了类似CSS编写过程中的中文注释，这里有些中文注释会在终端compss监听中报错，主要是ruby引擎的问题，解决方法是：找到rubyd 的安装目录里面的sass模块，路径如下：C：\Ruby\lib\ruby\gems\1.9.1\gems\sass-3.3.14\lib\sass，文件里面有个engine.rb,打开之后在所有的require XXXX后面添加代码Encoding.default_external = Encoding.find('utf-8)。现在一般浏览器都是用的utf-8字符。

sass语法使用

1. 变量操作

①直接操作变量，即变量表达式。

在_variable.scss文件中统一定义变量，变量定义用$开头

$color: #fff;

调用变量

div{
    color: $color;
}

编译生成的css文件

div{
    color: #fff;
}

②通过函数

• 跟代码无关的函数，多是自己内置函数，称为functions
  自定义函数

@function trible($i){
    @return $i * 2;
}
//trible函数返回三倍数据

调用

div{
    width: trible(5px);
}

编译实现效果

div{
    widt: 15px;
}

• 可重用的代码块，称为mixin
  mixinl类似于C中的宏定义，可以多次调用代码块，有@include
  和@extend 两种不同方式，同样首先新建外部_mixin.scss外部代码文件
  

1.使用@include 方法

定义响应式代码块col-6模块，

@mixin col-6{
    width: 50%;
    float: left;
}

使用@include 命令调用，首先同样需要将mixin块import进来

@import "mixin";

.demo{
    @include col-6();
    &:hover{
        background-color: #fff;
    }
}

编译转换效果

.demo{
    width: 50%;
    float: left;
}
.demo:hover{background: #fff;}

2.使用mixin还能指定参数和缺省值

@mixin col($width){
    width: $width;
    float: left;
}

调用

.demo{
    @include col(50%);
}

编译生成效果

.demo{
    width: 50%;
    float: left;
}

3.使用@extend 方法

现有两个错误级别，error和serious-error,
①第一张方案，serious-error中复用error中的color属性设置，造成了代码的冗余

.error{
    color: red;
}
.serious-error{
    color: red;
    font-size: 20px;
}

html文件

<div class="error">基本错误</div>
<div class="serious-error">严重错误</div>

②第二种方案，在html中同时引入error类，不有利于语义化

.error{
    color: red;
}
.serious-error{
    font-size: 20px;
}

html文件

<div class="error">基本错误</div>
<div class="error serious-error">严重错误</div>

③使用@extend 方案

.error{
    color: red;
}
.serious-error{
    @extend: .error;
    font-size: 20px;
}

编译生成css代码效果

.error, .serious-error{
    color: red;
}
.serious-error{
    font-size: 20px;
}

• 使用&符号，生成a标签的hover伪类

a{
    &:hover {color: #f0f0f0;}
}

生成css文件

a:hover{
    color: #f0f0f0;
}

内部属性嵌套，在头文件中字体font定义：

.headline{
    font:{
        size: 16px;
        family: "微软雅黑";
    }
}

编译生成css代码：

.headline{
    font-size: 16px;
    font-family: "微软雅黑";
}

(end)