博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
SASS环境搭建及HBuilder中sass预编译配置
阅读量:6514 次
发布时间:2019-06-24

本文共 1960 字,大约阅读时间需要 6 分钟。

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

至于请移步:https://www.zhihu.com/question/33811497 

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

如图:

  2.建议装到c盘(这里记住你的安装地址,后期有用)

  3.勾选中间的path

 

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

  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 

(后边红字:是编译出来的风格。。。)

 

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

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/

 

 

转载于:https://www.cnblogs.com/padding1015/p/7133811.html

你可能感兴趣的文章
cacti相关资料网站
查看>>
我的友情链接
查看>>
浅析:Android--Fragment的懒加载
查看>>
Linux操作系统目录和Linux常用的文件和目录管理命令
查看>>
DIY:自己动手做一个迷你 Linux 系统(二)
查看>>
猫猫学IOS(三十)UI之Quartz2D画图片画文字
查看>>
09值类型、引用类型、字符串
查看>>
ethereumjs/merkle-patricia-tree-2-API
查看>>
go标准库的学习-runtime
查看>>
pytorch Debug —交互式调试工具Pdb (ipdb是增强版的pdb)-1-使用说明
查看>>
NodeJS学习之文件操作
查看>>
AJAX的get和post请求原生编写方法
查看>>
WebSocket 是什么原理?为什么可以实现持久连接
查看>>
Python自学笔记-logging模块详解
查看>>
Head First--设计模式
查看>>
iOS之CAGradientLayer属性简介和使用
查看>>
微信小程序UI组件、开发框架、实用库
查看>>
模块化Javascript代码的两种方式
查看>>
Money去哪了- 每日站立会议
查看>>
Python数据结构和算法学习笔记1
查看>>