美文网首页程序员
如何安装并编译sass为css文件

如何安装并编译sass为css文件

作者: jerry_mei | 来源:发表于2016-09-17 21:40 被阅读2569次

    Ruby安装

    由于sass依赖于ruby环境,所以在安装sass之前必须安装ruby。可以去[官网][1]下载一个。网络环境不好的,可以用我提供的这个文件:[点击下载][2]

    安装完成后可以在开始菜单找到ruby命令行,打开输入ruby -v查看版本号,出现版本信息则安装成功
    ![clipboard.png-6.6kB][4]
    ![QQ截图20160917210342.png-1.6kB][3]

    Sass安装

    安装完ruby后,可以直接在命令行里面输入gem install sass安装Sass,不过由于墙的厉害,建议使用淘宝的ruby源来安装,步骤如下:

    gem sources --remove https://rubygems.org/
        https://rubygems.org/ removed from sources
    
    gem sources -a https://ruby.taobao.org/
        https://ruby.taobao.org/ added to sources
    

    这一步有可能会出错,windows下证书无法验证。
    解决方法:[下载证书][5](右键另存为即可),放到ruby安装目录下,然后再设置环境变量SSL_CERT_FILE为该文件路径,再重新输入该命令
    ![QQ截图20160917211759.png-8.6kB][6]

    gem source -l
        *** CURRENT SOURCES ***
        https://ruby.taobao.org/
    
    gem install sass
        Fetching: sass-3.4.13.gem (100%)
        Successfully installed sass-3.4.13
        Parsing documentation for sass-3.4.13
        Installing ri documentation for sass-3.4.13
        Done installing documentation for sass after 12 seconds
        1 gem installed
        
        //如果你在安装时出现如下提示,则表明网络不佳或源没有切换到 ruby.taobao.org
        ERROR:  Could not find a valid gem 'sass' (>= 0), here is why:
        Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (
        https://api.rubygems.org/latest_specs.4.8.gz)
    
    sass -v
        Sass 3.4.13 (Selective Steve)
    

    到此,所有的安装都结束了。接下来我们就可以直接编译sass文件了

    Sass编译

    打开ruby命令行,切换到scss文件所在目录,执行sass style.scss style.css,就可以将style.scss文件编译成style.css文件

    更多的指令可以参考[sass编译文档][7]

    参考文档:

    1. sass安装:http://www.w3cplus.com/sassguide/install.html
    2. windows证书无法验证:
      https://github.com/ruby-china/rubygems-mirror/wiki
    3. 使用ruby.taobao安装sass:
      https://github.com/nimojs/blog/issues/14#hash_ruby1
      [1]: http://rubyinstaller.org/downloads
      [2]: http://static.zybuluo.com/Jerry-MEI/wanm44mo5umiuk2ib24lap1e/rubyinstaller-2.3.1-x64.exe
      [3]: http://static.zybuluo.com/Jerry-MEI/fec9b1duuv43ymd2ke0oq42a/QQ%E6%88%AA%E5%9B%BE20160917210342.png
      [4]: http://static.zybuluo.com/Jerry-MEI/yxtqlw6j9eyh7wrb7rllf3u3/clipboard.png
      [5]: http://curl.haxx.se/ca/cacert.pem
      [6]: http://static.zybuluo.com/Jerry-MEI/irgyl6sw2lxafdgohfwle41w/QQ%E6%88%AA%E5%9B%BE20160917211759.png
      [7]: http://www.w3cplus.com/sassguide/compile.html

    相关文章

      网友评论

        本文标题:如何安装并编译sass为css文件

        本文链接:https://www.haomeiwen.com/subject/xxswettx.html