首先官网(http://www.ruby-lang.org/en/downloads/)下载 ruby

(1)打开链接进入到下载页面,点击如下位置进行下载

(2)下载页面

(3)进入到各个版本的列表页

安装 sass
(1)在开始菜单输入“start”会出现“Start Command Prompt with Ruby”,鼠标点击 “Start Command Prompt with Ruby” 运行

在这个命令行窗口中,输入“ruby -v”,会出现 ruby 的版本号,则证明 ruby安装成功

紧接着输入“gem -v”会出现 gem 的版本号,则证明 gem 安装成功

在上述窗口中继续输入“gem install sass”

在上述窗口中输入“sass -v”检测 sass 是否安装成功,出现 sass 版本号,则表示 sass安装成功

到此,sass 的环境安装完成,sass 安装完成
下面开始安装 sublime 插件

(1)打开 sublime 编辑器,查看是否有“package control”

(2)如果没有,则需要先安装“package control”,“package control”安装步骤如下:
①首先,在浏览器的地址栏输入 https://packagecontrol.io/installation

②打开 sublime 编辑器,按下快捷键 ctrl 和~

在弹出的输入框中,输入下面这段代码等待安装完成

③安装完成后,在 sublime 编辑器中,按下快捷键 ctrl 和 shift 和 p(备注:编辑器左下角会显示是否安装完)

如果 Package control 安装不了插件

1、如图,找到如下图的文件,打开

2、输入红框中的配置信息

"channels":
[
"http://cst.stu.126.net/u/json/cms/channel_v3.json"
],

3、配置完毕,重新启动 sublime 编辑器,即可正常安装 sublime 插件

接下来快捷键ctrl+shift+p 输入inp

然后,在弹出的输入框中,输入 sass,选中 Sass 回车,进行安装

安装完成后,重新按下快捷键 ctrl 和 shift 和 p,调出 package control

安装完成后,在弹出的输入框中,输入 sass,选中 SASS Build 回车,等待安装完成

安装完成后,在 sublime 编辑器上可以看到如下的菜单,如图进行选择

3、编译 sass
(1)新建一个以英文命名的文件夹(中文的编译的时候容易报错),格式如下:

(2)在 sass 文件夹新建一个 sass 文件,文件以 .scss 为后缀,即:

(3)在 sass 文件中书写代码,然后进行如图操作

自动保存,使用ctrl+s保存scss文件时,自动生成css文件

输入inp

选择SublimeOnSaveBuild插件安装

Sass环境安装-Sass sublime 编辑器插件编译方法的更多相关文章

  1. 学习Sass之安装Sass(一)

    为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...

  2. 学习Sass之安装Sass

    学习Sass之安装Sass 为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE ...

  3. MyEclipse 10 中安装Android ADT 22插件的方法

    MyEclipse 10 中安装Android ADT 22插件的方法 下载ADT包:http://dl.google.com/android/ADT-22.0.0.zip 将ADT-22.0.0.z ...

  4. sass的入门(安装以及sublime中如何编译sass)

    很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识.但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了. 万事开头难, ...

  5. Sass学习之路(2)——Sass环境安装(windows版)

    因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...

  6. sublime编辑器插件

    sublime---插件 http://www.cnblogs.com/dudumao/p/4054086.html sublime--- Emmet插件  使用方法 http://docs.emme ...

  7. qt4.8.4安装以及64位程序编译方法

    本文将使用简单的几个步骤说明在vc2008和64位的操作系统下如何编译安装x64Qt软件 首先必须保证你所使用的系统是64bit的操作系统,本次我们使用的系统是windows7 professiona ...

  8. 手动安装ubuntu视频播放器插件的方法

    新安装的ubuntu14.04在浏览器里面都不能看视频,提示缺少播放器插件,而且有一个安装的按钮,但是点击之后往往提示找不到,这就要手动安装了.第一步:首先运行一下更新命令吧sudo apt-get ...

  9. WDCP面板Web环境安装redis与phpredis扩展应用方法

    http://www.ctyun.cn/bbs/thread-2882-1-1.html根据网友的要求需要在WDCP面板环境中安装人人商城程序,但是这个程序需要支持redis与phpredis扩展.根 ...

随机推荐

  1. Centos7桥接设置网络并使用xrdp+tigervnc实现桌面远程访问

    最近用到了虚拟机,之前虚拟机的网络配置使用的NAT配置好了,但是无论怎样设置都无法使用局域网内的其它主机访问虚拟机的服务.经过了一天的折腾,远程主机仍然连接不上虚拟机服务,后来找到原因,NAT连接模式 ...

  2. python 内置模块之ConfigParser--配置读写

    用于对特定的配置进行操作,当前模块的名称在 python 3.x 版本中变更为 configparser. #配置文件test.cfg [section1] k1 = v1 k2 :v2 k3 = 1 ...

  3. HDU_3415_单调队列

    http://acm.hdu.edu.cn/showproblem.php?pid=3415 初探单调队列,需要注意的是每次i维护的是i-1. #include<iostream> #in ...

  4. WeChall_Training: Crypto - Caesar I (Crypto, Training)

    As on most challenge sites, there are some beginner cryptos, and often you get started with the good ...

  5. 【题解】删数问题(Noip1994)

    题目 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 11506 通过数: 3852 [题目描述] 输入一个高精度的正整数n,去掉其中任意s个数字后剩下的数字按原左右次序组成一个新 ...

  6. 见异思迁:K8s 部署 Nginx Ingress Controller 之 kubernetes/ingress-nginx

    前天才发现,区区一个 nginx ingress controller 竟然2个不同的实现.一个叫 kubernetes/ingress-nginx ,是由 kubernetes 社区维护的,对应的容 ...

  7. make: *** No targets specified and no makefile found. Stop.错误

    # make make: *** No targets specified and no makefile found. Stop. # yum install gcc gcc-c++ gcc-g77 ...

  8. Windwos日志分析

    Windows日志分析工具 查看系统日志方法: 在“开始”菜单上,依次指向“所有程序”.“管理工具”,然后单击“事件查看器” 按 "Window+R",输入 ”eventvwr.m ...

  9. Pandas常用功能

    在使用Pandas之前,需要导入pandas库 import pandas  as pd #pd作为pandas的别名 常用功能如下: 代码 功能1 .DataFrame()   创建一个DataFr ...

  10. python len函数(41)

    在python中除了print函数之外,len函数和type函数应该算是使用最频繁的API了,操作都比较简单. 一.len函数简介 返回对象的长度(项目数)参数可以是序列(例如字符串str.元组tup ...