SASS学习系列之(一)--------- SASS,SCSS环境搭建(Ruby)

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文件, 第三个是生成的文件 (中途没有路径显示,只有一个小光标在闪时,那是正在编译,不要终止! )
这里写图片描述

第九步

: 进你的目录看下结果···
这里写图片描述

到此就基本结束了。
编译后的文件(没格式化下。。)
这里写图片描述

大概流程汇总

这里写图片描述

http://sass.bootcss.com/
安装的参考地址: https://www.w3cplus.com/sassguide/install.html
阮一峰的sass入门blog: http://www.ruanyifeng.com/blog/2012/06/sass.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值