码迷,mamicode.com
首页 > 其他好文 > 详细

Sass环境安装-Sass sublime 编辑器插件编译方法

时间:2020-01-29 21:49:46      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:info   download   alt   png   pack   uil   save   自动保存   插件   

首先官网(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 编辑器插件编译方法

标签:info   download   alt   png   pack   uil   save   自动保存   插件   

原文地址:https://www.cnblogs.com/chenyingying0/p/12241401.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!