sass学习

Sass 可以通过以下三种方式使用：作为命令行工具；作为独立的 Ruby 模块 (Ruby module)；或者作为 Rack-enabled 框架的插件（例如 Ruby on Rails 与 Merb）。

1.安装

ruby安装

由于SASS是在Ruby环境下运行，所以首先需要在自己的电脑上安装Ruby。

1.在Mac系统下，Ruby一般已内置在其中，查看是否安装:ruby -v

2.在windows系统下，先到官网下载个ruby
在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

---

sass安装

1.标准稳定版安装（推荐!!!）

    gem install sass

有的时候在Linux和OS X系统下，可能需要超级管理员权限才能安装：

    sudo gem install sass

2.Beat版本安装 ( 若想要获取SASS的一些最新变化和最新功能，安装一个Beat版本的SASS，会自动创建每次更改的主分支 )

    gem install sass --pre

3.从Git库中安装

    git clone git://github.com/nex3/sass.git
    cd sass
    rake install

Windows系统下安装SASS，可以点击这里。

查看你安装的sass：sass -v

---

安装sass库

1.安装Compass库

Compass是一个非常成熟的SASS库，可是一个很强大的框架，使用的频率也相当的高。如果您了解了Compass，那么他将会让你受益无穷。同样的，在你的项目中使用Compass，需要先安装Compass。

gem install compass

2.安装Bourbon库

gem install bourbon

---

2.创建第一个sass项目

mySass

sass ==> 新建style.scss/style.sass

css <== 编译后的style.css文件

sass有两种后缀名文件：一种后缀名为.sass，不使用大括号和分号；另一种就是.scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号。

注：建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。任何一种格式都可以直接导入（@import）到另一种格式之中使用，或者通过sass-convert命令工具转换格式：

//sass To scss
sass-convert style.sass style.scss;
//scss To sass
sass-convert style.scss style.sass;

Sass 还会自动缓存编译后的模板，这样做能够显著提升重新编译的速度，尤其在处理由 @import 导入多个子文件的大型项目时。单独使用 Sass，缓存内容保存在 .sass-cache 文件夹中。

---

3.sass语法

1.变量：sass允许使用变量，所有变量以$开头

$blue : #1875e7;
div {
    color : $blue;
}

一个变量含有多个值，如$i : 12px 15px 16px 14px
取第index个值时nth($i,index)

如果变量需要镶嵌在字符串之中，就必须写在#{}之中。

$side : left;
.rounded{
    border-#{
  $side}-radius : 5px;
}

普通（局部）变量:用$base:1.6 !global可以将局部变量转为全局变量

默认（全局）变量：用$base:1.6 !default声明为全局变量

注意：

• 变量声明顺序问题：必须在调用变量语句的上面，这样才能正确的调用变量。
• 变量有作用域的问题（全局变量、局部变量）：代码段a内不可引用代码段b内定义的局部变量。
• 变量重名问题：3.4版本中无重名问题，但是早期的版本中如果我们在本地重新定义了一个全局变量，这将是新的全局变量。所以，在我们的示例中编译样式时取决于我们声明的变量的顺序和mixin的顺序。

2.*计算功能：***sass允许在代码中使用算式（运算的时候，会以空格作为分割，会操作相邻的两个数值）

$a : 100px;
body{
    padding-top : (14px / 2);       //7px
    margin : 3px + 4px auto;        //7px auto
    top : 50px + 100px;     //150px
    right : $a * 10%;  //10px
}

a）.sass中的加法
加法运算还可以做字符串拼接功能，如：

p {
  cursor: e + -resize;
}

输出为：p { cursor: e-resize; }

加法连接字符串时，对于引号的合并也有一定规则，如果前面字符串带有引号，后面字符串会自动包含在引号中，如果前面没有，后面带有引号的字符串也会去掉引号：

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

输出为：

p:before {
    content: "Foo Bar";
    font-family: sans-serif; 
}

如果在字符串中计算并输出，需要用到#{}，例如：

$w : 10;
p:before{
    content : "I ate #{5 + $w} pies!";
}

输出为：

p:before{
    content : "I ate 15 pies!"；
}

b).sass中的除法

p {
  font: 10px/8px;             // 纯 CSS 不会运算
  $width: 1000px;
  width: $width/2;            // 使用变量，执行运算
  width: round(1.5)/2;        // 使用函数返回值，执行运算
  height: (500px/2);          // 使用括号包裹，执行运算
  margin-left: 5px + 8px/2px; // 用了加法，作为表达式的一部分，执行运算
}

编译后输出为：

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

注意事项：

*建议运算符之间空开一个空格。

*注意运算单位。单位也会参与运算。
>
* 加法：