《hand by hand to learn sass》一

 

  前言：

 

       其实sass出来都不知道多久了，但是针对N多不了解或者了解了没实践的同学，还是hand by hand一下吧，希望能帮助到你！

 

  

  正文：

 

       本系列开篇就不介绍sass是什么了，有兴趣直接百度，本文直接教你如何安装环境？

 

• 需要ruby

      下载地址： http://rubyforge.org/frs/?group_id=167&release_id=28426

 

       如图：选择1.9.2-p180下载

 

  
 

 

• 下载完成后，双击安装， 如下图， 建议对Add Rudy那个打上勾：

      
 
 

• 安装完成后，在开始菜单，选择Start Command

      
 

 

• 输入：gem install haml

    
     
 

• 输入：gem install sass

    
     

 

 

• 成功后，在D盘建立一个sass的文件夹，然后建立一个1.sass的文件，内容直接粘贴官网：

        
 

      代码直接粘贴：

 

$blue: #3bbfce
$margin: 16px
 
.content-navigation
  border-color: $blue
  color: darken($blue, 9%)
 
.border
  padding: $margin / 2
  margin: $margin / 2
  border-color: $blue

 

• cd到对应的sass文件目录（比如：d盘的sass文件夹），在执行

        
 

 

• 查看文件目录，发现会编译出一些新文件，如图：

   
         
 

• 我们看看style.css编译生成的内容，如图：