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

简介: ---------------------------------Ruby环境安装--------------------------------至于为什么要安装ruby环境请移步:https://www.

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

至于为什么要安装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 

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

 

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

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/

 

 

目录
相关文章
|
存储 Go 容器
【golang】对键值有顺序要求时,不要使用 map
【golang】对键值有顺序要求时,不要使用 map
467 0
|
JSON Prometheus Go
Golang模板template
Golang模板template
|
资源调度 JavaScript Apache
Vue2使用echarts树图(tree)
这篇文章介绍了如何在Vue 3框架中集成echarts库来创建一个树状图(Tree Chart)组件,支持自定义数据和交互事件。
1195 0
Vue2使用echarts树图(tree)
|
弹性计算 大数据 测试技术
2024年阿里云服务器租用价格表(CPU/内存/带宽/磁盘收费标准)
2024年阿里云服务器租用价格表更新,云服务器ECS经济型e实例2核2G、3M固定带宽99元一年、ECS u1实例2核4G、5M固定带宽、80G ESSD Entry盘优惠价格199元一年,轻量应用服务器2核2G3M带宽轻量服务器一年61元、2核4G4M带宽轻量服务器一年165元12个月、2核4G服务器30元3个月,幻兽帕鲁4核16G和8核32G服务器配置,云服务器ECS可以选择经济型e实例、通用算力u1实例、ECS计算型c7、通用型g7、c8i、g8i等企业级实例规格。阿里云百科分享阿里云服务器租用费用最新报价
|
XML 安全 JavaScript
goctl 技术系列 - text/template 深入讲解
goctl 技术系列 - text/template 深入讲解
|
消息中间件 监控 Ubuntu
RabbitMQ安装配置,超详细版教程
以上步骤为您提供了在Linux环境下安装RabbitMQ的详细过程。安装Erlang作为基础,然后通过添加官方源并安装RabbitMQ本身,最后对服务进行配置并启用Web管理界面。这些步骤操作简单直观,只需要跟随上述指南,即可在短时间内将RabbitMQ服务器运行起来,并进行进一步的配置和管理。不要忘记硬件和网络资源对性能的影响,确保RabbitMQ能够满足您的应用需求。
1538 0
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
1544 0
Vue使用地图以及实现轨迹回放 附完整代码
|
监控 搜索推荐 Go
万字详解!在 Go 语言中操作 ElasticSearch
本文档通过示例代码详细介绍了如何在Go应用中使用`olivere/elastic`库,涵盖了从连接到Elasticsearch、管理索引到执行复杂查询的整个流程。
551 0
|
数据采集 JavaScript 前端开发
动态内容抓取指南:使用Scrapy-Selenium和代理实现滚动抓取
在传统的网络爬虫中,静态网页内容很容易抓取,但对于通过JavaScript加载的动态内容,通常需要借助浏览器进行模拟访问。Scrapy-Selenium是一款结合了Scrapy和Selenium功能的库,可以实现模拟浏览器行为,从而实现抓取动态内容的目的。
955 0
动态内容抓取指南:使用Scrapy-Selenium和代理实现滚动抓取
|
SQL Go
Go语言之GORM框架(三)——Hook(钩子)与Gorm的高级查询
Go语言之GORM框架(三)——Hook(钩子)与Gorm的高级查询
579 0