【转载】SASS学习系列之(一)--SASS，SCSS环境搭建(Ruby)

原博文链接：https://blog.csdn.net/wx11408115/article/details/78019576

 

1. 下载RubyInstaller
window下载RubyInstaller: http://rubyinstaller.org/downloads/

根据自己机型，下载对应的安装包。

2. 安装RubyInstaller
选择你的安装路径(等下要用), 记得勾选把Ruby加到你的PATH。

 

其他没什么注意的····

3. 安装
1.) 找到之前安装路径，点击ruby.exe (最后文件是自己测试的)

 

2.) 淘宝RubyGems镜像安装 sass
输入命令:

第一步

移除源

gem sources --remove https://rubygems.org/

第二步

更换源(截图提示不支持https) 

gem sources -a https://ruby.taobao.org/

第三步

: 不支持https,，否则跳过

gem sources -a http://gems.ruby-china.org

第四步

: 显示源列表

gem sources -l

请确保只有 ruby.taobao.org

 

第五步

: 安装sass

$ gem install sass

提示安装完成就可以编译sass文件了

第六步

： 切换路径至你的Ruby路径(不是必须项，也可以是其他测试的项目文件夹)

 

第七步

： 新建一个test.scss文件(注意后缀)
#main p {
color: #00ff00;
width: 97%;

.redbox {
background-color: #ff0000;
color: #000000;
}
}

` 保存

第八步

： 输入

sass test.scss test.css

第二个是要编译的scss文件， 第三个是生成的文件 (中途没有路径显示，只有一个小光标在闪时，那是正在编译，不要终止！ )

第九步
: 进你的目录看下结果···

到此就基本结束了。
编译后的文件(没格式化下。。)

大概流程汇总

 

 

总结，对于新手而言，相关的关闭源的操作无法理解，或者说必要性不强，可以直接在node环境下直接输入

$gem install sass

即可下载到必须的sass组件

http://sass.bootcss.com/
安装的参考地址: https://www.w3cplus.com/sassguide/install.html
阮一峰的sass入门blog： http://www.ruanyifeng.com/blog/2012/06/sass.html
---------------------
作者：WiFi_Uncle
来源：CSDN
原文：https://blog.csdn.net/wx11408115/article/details/78019576
版权声明：本文为博主原创文章，转载请附上博文链接！