ruby中输入命令行编译sass（ruby小白）

Ruby（或cmd中）输入命令行编译sass步骤如下：

（1）举例而言：首先在F盘下建立一个总文件夹，比如test文件夹；其次在该文件夹下建立html，images，js，sass等文件夹。

（2）在sass文件夹中创建要使用到的sass文件。例如common.scss,reset.scss,config.scss等公共文件以及项目中需要使用到的各个文件，当然这里的文件也可以分别放在不同的文件夹中，不过都是sass文件夹的子目录。

（3）如下是sass文件夹下的common.scss：

 /*
 *created by Irene
 *2016-04-20
  */
 div{
     width: 300px;
     height: 300px;
     border: 1px solid #000;
     background-color: #333;
     p{
         width: 200px;
         height: 200px;
         background-color: #666;
         a{
             display: inline-block;
             width: 100px;
             height: 100px;
             background-color: #999;
         }
     }
 }

（4）启动ruby，可以设置快捷键（右键开始菜单中的ruby，选择属性设置快捷键），（我设置的是Ctrl+Alt+Z）。

（5）根据步骤输入命令行。

得到如下结构：

（6）这种情况下的命令行没有清除缓存，因此会有文件及文件夹生成结果是这样的：

得到如下结构：

因此最好带上清除缓存的--no-cache指令。

（7）若是sass文件夹下有多个scss文件，要指定某一个文件被编译，则专门指定哪一个文件即可。命令见下图，其中首先找到sass文件这个目录，然后将sass文件夹下的某一个文件转化为css文件夹下的某一个。

生成了如下的结构：

（8）发现的问题：

a．在test文件夹下必须建立了sass文件夹，ruby需要识别sass文件夹（我试过直接在没有sass文件夹下进行编译，失败了）；

b．--no-cache是清除缓存，--watch是监听指令，--style是样式，compressed指令可以压缩css文件。

c．又发现可几个编译为不同形式的css文件形式的指令

（替换命令中的“compressed”）：

【1】nested：嵌套缩进的css代码，它是默认值。

 /*
 *created by Irene
 *2016-04-20
  */
 div {
   width: 300px;
   height: 300px;
   border: 1px solid #000;
   background-color: #333; }
   div p {
     width: 200px;
     height: 200px;
     background-color: #666; }
     div p a {
       display: inline-block;
       width: 100px;
       height: 100px;
       background-color: #999; }

 /*# sourceMappingURL=common.css.map */

【2】expanded：没有缩进的、扩展的css代码。

 /*
 *created by Irene
 *2016-04-20
  */
 div {
   width: 300px;
   height: 300px;
   border: 1px solid #000;
   background-color: #333;
 }
 div p {
   width: 200px;
   height: 200px;
   background-color: #666;
 }
 div p a {
   display: inline-block;
   width: 100px;
   height: 100px;
   background-color: #999;
 }

 /*# sourceMappingURL=common.css.map */

【3】compact：简洁格式的css代码。

 /*
 *created by Irene
 *2016-04-20 */
 div { width: 300px; height: 300px; border: 1px solid #000; background-color: #333; }
 div p { width: 200px; height: 200px; background-color: #666; }
 div p a { display: inline-block; width: 100px; height: 100px; background-color: #999; }

 /*# sourceMappingURL=common.css.map */

【4】（还是加上这一条，强迫症…）compressed：压缩后的css代码。（生产环境当中，一般使用压缩后的）

 div{width:300px;height:300px;border:1px solid #000;background-color:#333}div p{width:200px;height:200px;background-color:#666}div p a{display:inline-block;width:100px;height:100px;background-color:#999}
 /*# sourceMappingURL=common.css.map */

（自言自语：对于这个操作，目前自己的理解是这样的，肯定很片面也很不具体，但是会一步步学习改善哒。）