首先官网(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. 使用Apache服务器实现Nginx反向代理

    实验环境:centos7 注:因为本次实验在同一台服务器上,Apache与Nginx同为80端口,所以改Apache端口为60 1 配置Nginx服务器: 编辑Nginx配置文件,写入以下内容 loc ...

  2. 二维数组转稀疏数组、稀疏数组恢复二维数组(Java实现)

    public static void main(String[] args) { // 创建一个原始的二维数组 9*9 int chessArr1[][] = new int[9][9]; // 0表 ...

  3. 网络安全初级实战笔记(一):owasp zap 暴力破解

    网络安全里装着好多人的侠客梦.但是不能触碰铁律,所以,只小小的自娱自乐. 自己练习,大都会用到DVWA,一个很好的安全测试平台,自己搭建(很简单,傻瓜式搭建),自己设置安全级别,自己验证各种漏洞攻击方 ...

  4. Hadoop fs 使用方法

    hdfs的基本命令 hdfs dfs -help    查看帮助 在HDFS的文件系统中,HDFS只支持绝对路径 1.-ls: 显示目录信息 hadoop fs -ls / 列出指定目录下的内容 2. ...

  5. mysql 8.0.12版本 忘记密码

    1.mysqld --console --skip-grant-tables --shared-memory 2.另一个控制台 mysq 3.use mysql; 4.select user,host ...

  6. Angular 从入坑到挖坑 - 组件食用指南

    一.Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件 ...

  7. Vue与React的区别

    对已经了解的内容,做几点介绍,并不全面,后期会不断更新~ React与Vue都是组件化的开发框架,整体功能类似. 一.数据处理模式(单项 or 双向): React推崇单项数据流的处理模式,数据不可以 ...

  8. springcloud vue.js 前后分离 微服务 分布式 activiti工作流 集成代码生成器 shiro权限

    1.代码生成器: [正反双向](单表.主表.明细表.树形表,快速开发利器)freemaker模版技术 ,0个代码不用写,生成完整的一个模块,带页面.建表sql脚本.处理类.service等完整模块2. ...

  9. Ubuntu系统下使用php7+mysql+apache2搭建自己的博客

    很多人都有写博客的习惯,奈何国内的博客网站正在一家家地关闭与重整,部分博客网站也充斥着太多的广告,使用体验非常不好.对于爱写博客的朋友来说,其实还有一个更好的选择,那就是自己搭建一个博客. 搭建一个自 ...

  10. 转载:字符编码简介 ASCII UTF-8 ISO8859-1

    字符编码简介 ASCII UTF-8 ISO8859-1 博客分类: 电脑综合知识 XP数据结构Windows  计算机中的一切都是以数字来表示的,字符同样如此.字符编码就是将字符集编码成为数字序列, ...