SASS环境搭建及HBuilder中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.命令行输入: get 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/

提示:

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

-------------------------------------------------------------------------------------正经分割线!!!--------------------------------------------------------------------------------------------------------------------------

声明:

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

  博主:xing.org1^

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏jeremy的技术点滴

记录解决几个前端小问题的过程

61160
来自专栏自动化测试实战

获取响应头与发送头

48560
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery 前情回顾 在上一篇博文中,我们讲到了,...

21070
来自专栏BeJavaGod

【老话新说】在springmvc中使用hibernate-validate

老鸟绕道,新手可以看看,目前流行的SSM中都是使用的hibernate-validate进行验证,可以通过页面标签error显示 或者以json方式(推荐),作...

27270
来自专栏liulun

基于.net开发chrome核心浏览器【三】

本篇我们讲解怎么用CefGlue开发一个最简单的浏览器 一: CefGlue是建立在Cef项目之上的, Cef项目是C/C++的项目; CefGlue只不过是通...

36050
来自专栏小樱的经验随笔

记一次用WPScan辅助渗透WordPress站点

WPScan 是一个扫描 WordPress 漏洞的黑盒子扫描器,它可以为所有 Web 开发人员扫描 WordPress 漏洞并在他们开发前找到并解决问题。我们...

30830
来自专栏更流畅、简洁的软件开发方式

【自然框架】QuickPager分页控件的单独的源码 V2.0.4.2。

  QuickPager的源码分离出来之后由两个项目组成,一个是QuickPager、另一个是QuickPagerSQL。分页控件的演示也独立了出来。 如图...

285100
来自专栏贺贺的前端工程师之路

React-Native 遇到的错误1. React-Native 部分组件在debug模式下打包在iOS真机上可以显示,但是release模式下打包在iOS真机上不显示2. React-Native

这段代码在release包的情况是,buttons是空的,是由于if (child.type.name === 'FlowSendButton')这是判断根本不...

14930
来自专栏技术博客

ExtJs九(ExtJs Mvc用户管理之一)

首先要做的是为用户信息创建一个模型,在Scripts\app\model目录下创建一个名为User.js的文件,然后添加以下模型定义代码:

12420
来自专栏Jackson0714

30分钟全面解析-图解AJAX原理

431120

扫码关注云+社区

领取腾讯云代金券