Mac安装Sass介绍

由于Sass是用Ruby语言开发出来的，所有安装Sass必须先安装Ruby，但是Mac自带Ruby，执行以下命令查看版本

ruby -v

使用Ruby的gem软件包管理工具执行以下命令

gem install sass

安装好Sass之后执行命令查看版本信息

sass -v

---

Sass的文件的后缀名有两种形式：.sass和.scss。这两种的区别在于.sass文件对代码的排版有着非常严格的要求，而且没有大括号，没有分号。常用的是Scss文件格式

Scss文件代码

.a {  
    color: blue;  
    font-weight: bold;  
    text-decoration: underline;  
    .b {  
        color: black;  
    }  
} 

Sass代码

.div  
 color: blue  
 .b  
  color: black  
  font-weight: bold  
  text-decoration: none  
  .c  
   color: white  

---

编译Sass方式有很多种，例如koala，nodejs，在线编译，编辑器插件编译等等，这里介绍的是使用命令行

Sass四种编译风格

1. nested 嵌套缩进分隔（默认）

   //sass --watch style.scss:style.css --style nested
   
   #main {
     color: #fff;
     background-color: #000; }
     #main p {
         width: 10em; }
   
   .default {
     border: 1px solid #ccc; }       
   

2. expanded 没有缩进、扩展的css代码

   //sass --watch style.scss:style.css --style expanted
   
   #main {
     color: #fff;
     background-color: #000;
   }
   #main p {
     width: 10em;
   }
   
   .success {
    color: green;
   }
   

3. compact 简介格式的css代码

   //sass --watch style.scss:style.css --style compact 
   
   #main { color: #fff; background-color: #000; }
   #main p { width: 10em; }
   

4. compressed 压缩后的css代码（最常用）

   //sass --watch style.scss:style.css --style compressed  
   
   #main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
   

---

单文件编译

sass style.scss style.css

单文件监听编译（scss文件有发送改变实时更新css文件）

sass --watch style.scss:style.css

目录监听编译

sass --watch sassFileDirectory:cssFileDirectory

css文件转换格式

sass-convert style.css style.sass   
sass-convert style.css style.scss  

---

• –style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。

• –sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

• –debug-info表示开启debug信息，升级到3.3.0之后因为sourcemap更高级，这个debug-info就不太用了。

  sass –watch style.scss:style.css –style compact
  sass –watch style.scss:style.css –sourcemap
  sass –watch style.scss:style.css –style expanded –sourcemap
  sass –watch style.scss:style.css –debug-info