SASS环境搭建及HBuilder中sass预编译配置

Posted 2020-09-27 xing.org1^

想要使用sass吗？那你就得先搭建环境啊！我的成长史是一部心酸的摸索史啊！虽然第一次安装的时候，踩了不少坑，一个一个填好了。结果回家再装一遍全都忘了！我真的确定脑子没落到工位！这不，防止下次再采坑，我整理了自己安装的步骤，供参考。

---------------------------------Ruby环境安装--------------------------------

至于为什么要安装ruby环境请移步：https://www.zhihu.com/question/33811497 

　　1.先下载一个ruby的安装文件：文件名可以搜索：rubyinstaller-2.3.1-x64 

如图：

　　2.建议装到c盘（这里记住你的安装地址，后期有用）

　　3.勾选中间的path

 

然后就一路"南下”，直到看到finish

　　4.win7系统的在左下角输入start，定位到Start Command Prompt with Ruby面板并调出

 

5.命令行里输入：ruby -v  

查看是否安装成功（注意ruby和横线之间有个空格，不然不行。也可直接复制文中文字，然后右击命令行来粘贴，直接cc+cv不行）

如图，出现版本号就八九不离十了、、、

 

6.命令行输入： gem install sass  来安装sass

报了个乱七八糟的错

 拓展：GEM——Ruby环境内的一个包管理器，所以这里都是gem这三个字母开头，就好像在nodejs的环境下，有一个NPM的包管理工具一样，

后来学gulp安装了node之后，总是用npm来打头执行命令，突然再去学习compass，有点蒙开始用gem写，后来才搞清二者的关系，这里附笔。

7.（没报错就跳过步骤7,8,9）

命令行输入：gem sources --remove https://rubygems.org/

用来卸载镜像

提示：

 

8.再安装镜像

（这里不要骂我有毛病，卸了又装，我当时做这一步的时候确实***过，哈哈哈。至于卸了又装是有原因的，我们之前那个是国外服务器的，现在装的是淘宝镜像，

后来淘宝镜像没用，师傅给我找了下边这个地址。在这里感激师傅，也祝师傅一路走好，，，，，，，，，，，哈哈哈，不要多想哈，我说的是前程！！！）

命令行输入：gem sources -a http://gems.ruby-china.org/

提示：

 2018-06-19  17:55:06补充

如果这里还是没有成功，报错如下图：

可以临时修改下，随机应变，如我这里修改为：

最后也成功了

9.再次安装sass

命令行里输入：gem install sass

 

100%完成了

 

其实接下来就可以用命令行加上--watch来监测sass更新并实时编译成css了，如果非懒得打那一行几个小字母，就进行下一个阶段吧。

------------------------------------------------------HBuilder 中  预编译器配置------------------------------------------------------

1.HBuilder中，“工具”-“预编译器配置”

2.新建规则

3.填写信息，分别是：

.sass,.scss

D:\\Ruby23-x64\\bin\\sass.bat或C盘路径，看你前期ruby装到哪里

–no-cache %FileName% ../css/%FileBaseName%.css或–no-cache %FileName% ../css/%FileBaseName%.css –style compact 

（后边红字：是编译出来的风格。。。）

 

------------------------------------------------------其他拓展教程文链接------------------------------------------------------

HBuilder中配置预编辑器

Sass安装

 其他相关文章

 CSS预处理器——Sass、LESS和Stylus实践【未删减版】http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html

2017-07-07  19:27:10

 

 

-------------------------------------------------------------------------------------正经分割线！！！--------------------------------------------------------------------------------------------------------------------------

声明：

　　请尊重博客园原创精神，转载或使用图片请注明：

　　博主：xing.org1^

　　出处：http://www.cnblogs.com/padding1015/