Sass环境安装-Sass sublime 编辑器插件编译方法
首先官网(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 编辑器插件编译方法的更多相关文章
- 学习Sass之安装Sass(一)
为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE.JS而成为目前前后端统一开 ...
- 学习Sass之安装Sass
学习Sass之安装Sass 为什么使用Sass 作为前端(html.javascript.css)的三大马车之一的css,一直以静态语言存在,HTML5火遍大江南北了.javascript由于NODE ...
- 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 ...
- sass的入门(安装以及sublime中如何编译sass)
很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识.但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了. 万事开头难, ...
- Sass学习之路(2)——Sass环境安装(windows版)
因为本喵目前用的是window10的本子,所以这里就发windows版本的安装流程啦.(希望有朋友可以赞助我一个mac(┳_┳)): 第一步:安装ruby 因为Sass是基于ruby编写的,所以先去官 ...
- sublime编辑器插件
sublime---插件 http://www.cnblogs.com/dudumao/p/4054086.html sublime--- Emmet插件 使用方法 http://docs.emme ...
- qt4.8.4安装以及64位程序编译方法
本文将使用简单的几个步骤说明在vc2008和64位的操作系统下如何编译安装x64Qt软件 首先必须保证你所使用的系统是64bit的操作系统,本次我们使用的系统是windows7 professiona ...
- 手动安装ubuntu视频播放器插件的方法
新安装的ubuntu14.04在浏览器里面都不能看视频,提示缺少播放器插件,而且有一个安装的按钮,但是点击之后往往提示找不到,这就要手动安装了.第一步:首先运行一下更新命令吧sudo apt-get ...
- WDCP面板Web环境安装redis与phpredis扩展应用方法
http://www.ctyun.cn/bbs/thread-2882-1-1.html根据网友的要求需要在WDCP面板环境中安装人人商城程序,但是这个程序需要支持redis与phpredis扩展.根 ...
随机推荐
- 使用Python打造一款间谍程序
知识点 这次我们使用python来打造一款间谍程序 程序中会用到许多知识点,大致分为四块 win32API 此处可以在MSDN上查看 Python基础重点在cpytes库的使用,使用方法请点击此处 ...
- 内网客户 通过 公网域名/ip 访问内网web服务器 出错
在一内部局域网中, client 内网地址为 10.0.0.2 web 服务器内网地址为 10.0.0.1 外网地址为 211.6.15.1 域名为 xx.love.com ...
- raid知识梳理及其详细介绍
1 raid级别 生产环境常用到的raid级别有raid0,raid1,raid5,raid10.所以侧重学习这几种raid级别即可. 1.1 raid0条带卷 raid0示意图: raid0特点介绍 ...
- 杭电-------2048不容易系列之(4)考新郎(C语言)
/* 思路:有n位新郎,但是又m位新郎会找错,那么有n-m位新郎会找对,而找对的n-m位新郎的找发就是在 n位新郎中随机找n-m位有多少种排列组合公式有n!/(m!*(n-m!)),而另外找错的新郎则 ...
- python 安装自己下载的whl依赖
下载好之后保存到相应的地方,如下载了xxxx.whl文件并将它保存在D:\python\project目录下,然后 pip install D:\python\project\xxxx.whl即可
- 用pycharm自带的数据库创建项目00
一.生成表格1.创建模型类(在 models.py文件中创建一个person类并且继承models.Models类) 2.生成表格(在项目目录下)(1)生成迁移文件:在pycharm下方的命令行Ter ...
- toj 3761 Egg Problem (好题~~)
Egg Problem 时间限制(普通/Java):1000MS/3000MS 运行内存限制:65536KByte总提交: 22 测试通过: 7 描述 There is a very interest ...
- javascript30--day01--Drum kit
相关视频链接:https://www.bilibili.com/video/av8481988/?p=3 Drum kit 做题思路(1)监听键盘事件 addEventListener(‘事件名’,执 ...
- java 开发社区蔬菜、食品交易平台系统 源码
开发环境: Windows操作系统开发工具: MyEclipse+Jdk+Tomcat+Mysql数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php? ...
- R12客户表结构分析
客户表/联系人/PARTY关联 HZ_PARTIES 客户账户表 HZ_CUST_ACCOUNTS 例子: select hp.party_number --客户注册标识 ...