【WEB】Sass与Compass安装与入门(一)

在研究grunt的时候发现sass好火，作为css的编译器有必要了解一下，因此做了些小例子学习了一下，现记录如下：

一.SASS与COMPASS简介与安装

1.安装Ruby:
一键安装，见官网。

注：在MAC系统中，安装RVM（可选：Ruby版本管理工具）和Homebrew(可选)
RVM安装：
gpg –keyserver hkp://keys.gnupg.net –recv-keys
409B6B1796C275462A1703113804BB82D39DC0E3 \curl -sSL https://get.rvm.io| bash -s stable
Homebrew安装：
/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

2.修改ruby软件包的sources
由于国内网络原因，导致rubygems.org放在亚马逊上的资源文件经常连接失败，所以换用国内淘宝提供的rubysources。
首先移除掉rubygems.org：

gem sources --remove https://rubygems.org/

添加淘宝源：RubyGems 镜像的管理工作以后将交由 Ruby China 负责，参考http://gems.ruby-china.org/

$ gem sources --add https://gems.ruby-china.org/ --remove https://rubygems.org/
$ gem sources -l
https://gems.ruby-china.org
# 确保只有 gems.ruby-china.org

由于Ruby缺少SSL证书，因此要先按照以下网址要求进行配置,否则将无法安正确安装：
https://gist.github.com/fnichol/867550

3.安装sass:

gem install sass

注：常用gem 命令 ：gem update //更新所有包版本 ； gem uninstall sass –version=3.3.0//删除特定版本的sass
4.sass的简单使用

编译sass,第二个参数代表要编译的文件，后一个参数代表生成文件名：

注：一般不直接使用sass命令进行编译，常采用compass

5.compass的安装

gem install compass

6.compass的简单实用

compass create learncss

生成的项目目录如下图：

二.SASS的主要语法

以下只记录核心语法，其他参见官网:http://sass-lang.com/documentation/file.SASS_REFERENCE.html
1.实时监听sass的变化：

2.变量语法
在screen.scss中：

$headline-ff:Braggadocio,Arial,Verdana,Helvetica;
$main-sec-ff:Arial,Verdana,Helvetica,sans-serif;
@import "compass/reset";//compass提供的重置模块，通过重新定义标签样式来修改浏览器的默认样式。后期将改用Normalize插件,统一不同浏览器的样式差异。

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

import的使用： 新建一个文件— _variables.scss来存放变量，通过@import “variables” 引入。

注：不建议使用CSS原生的import指令。

基于sass的既定规则：
1.没有文件名后缀的时候，sass会添加.scss或者.sass后缀。
2.同一个目录下，局部文件和非局部文件不能重名。
3.可以通过逗号分离包: @Import “variables”,”compass/reset”

3.注释：

4.嵌套样式

//样式的嵌套
.main-sec{


    font-family:$main-sec-ff;
    .headline{
    //属性的嵌套
        font:{//不要漏掉冒号
                family:$main-sec-ff;
                size:16px;
        }
    }

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

编译出的CSS结果为：

5.变量操作
有两种方式可以操作变量，一种方式是直接操作变量，即变量表达式。另一种方式是通过函数。
函数有两种方式，一种是跟代码无关的函数，多是自己的内置函数，称functions,另一种是可重用的代码块，成mixin，通过@include的方式调用，另一种以组合声明的方式调用，使用@extend。
6.颜色表示

H:0-360;S:0-100% L：0-100%

p{
    color:hsl(270,100%,50%)
}

7.mixin的使用
界面中相同的组建可以抽象成mixin模块使用。
新建_mixin.scss

@mixin col-6{

    width:50%;
    float:left;
}

在screen.scss中，import “mixin”

.webdemo-sec{
    @include col-6();
    &：hover{
        background-color:f5f5f5;
   }
}

编译后的css文件如下：

注：mixin不调用的时候，不会输出任何的文件，调用的时候也只会在相应的地方生成。
mixin传参：

@mixin col($width:50%){//支持默认传参
   width:$width;
   float:left;
}

screen.scss

.webdemo-sec{
    @include col-6(50%);//传入参数
    &：hover{
        background-color:f5f5f5;
   }
}

8.extend
用一个选择器去计算另一个选择器的样式。

.error{
    color:#f00;
}

.serious-error{
    @extend .error;
    border:1px #f00;
}

注：

• @extend可以继承多个选择器
• extend不可以继承选择器序列
• 仅用于集成的类 %error{ }
  9.@media query
  sass中的media query可以内嵌在css规则中，在生成css的时候，media query才会被提到样式的最高级。好处是避免了重复书写选择器或者打乱样式表的流程。

@mixin col-sm($width:50%){
    @media(min-width:768px){//当屏幕宽度大于768的时候，将以50%的宽度显示，当宽度小于768的时候，默认以100%的宽度显示。

            width:$width;
            float:left;
    }


}

9.at-root
由于嵌套过多会影响css渲染的效率，因此
@at-root{
….
}