scss安装

sass安装

1. 在 Windows 平台下安装 Ruby ，到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

2. Ruby 安装文件下载好后，可以按应用软件安装步骤进行安装 Ruby。在安装过程中选择第二个选项（不选中，就会出现编译时找不到Ruby环境的情况），如下图所示：
   

3. Ruby 安装完成后，可以在命令提示符中输入 ruby -v查看版本；
   

4. 安装好 Ruby 之后，接下来就可以安装 Sass 了。同样的在windows下安装 Sass 有多种方法。

   • 通过命令安装sass（电脑的命令终端）：gem insatll sass
   • 通过compass来安装sass：gem install sass
   • 本地安装sass：有时候网络受限原因，直接使用上面的命令安装无法正常实现安装，当碰到这种情况之时，可以通过下面的方法来实现 Sass 的正常安装：到 Rubygems(http://rubygems.org/) 网站上将 Sass 的安装包（http://rubygems.org/gems/sass）下载下来，然后在命令终端输入： gem install <把下载的安装包拖到这里> 直接回车即可安装成功。
   • 淘宝 RubyGems 镜像安装 Sass：除了下载 Sass 安装包到本地安装之外，碰到网络原因无法安装时还可以使用淘宝 RubyGems 镜像安装 Sass。需要通过 gem sources 命令来配置源，先移除默认的 https://rubygems.org 源，然后添加淘宝的源 https://ruby.taobao.org：
     
     • 移动默认的源：gem sources –remove https://rubygems.org/
     • 指定淘宝的源：gem sources -a https://ruby.taobao.org/
     • 查看指定的源是不是淘宝源：gem sources -l
     • 返回结果如图：
   • 请确保只有 ruby.taobao.org。执行命令：gem install sass
   • 查看版 本: sass -v
   • 更 新: gem update sass
   • 卸 载: gem uninstall sass
5. sass 命令编译
   
   • 单文件编译：sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
   • 多文件编译：多文件编译：sass sass/:css/
   • “watch”功能，只要你的代码进行任保修改，都能自动监测到代码的变化，直接编译出来：sass –watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css

6. 输出风格

   nested ：sass –watch test.scss:test.css –style nested

   

   sass –watch test.scss:test.css –style expanded

   

   sass –watch test.scss:test.css –style compact

   

   sass –watch test.scss:test.css –style compressed

   

7. 中文注释编译报错

   在ruby安装目录中查找engine.rb文件
   
   再改文件require ‘sass/xxx’下添加：Encoding.default_external = Encoding.find(‘utf-8’)