安装sass以及如何在sublime里使用

如何在sublime中使用sass文件编译 最开始,我是想使用koala来实现对sass的实时编译的,但是每当我保存的时候,总是弹出erro错误,即无法编译生成css文件,百度了半天,问了好久,这个问题还是没能解决了,还希望能有个哥哥姐姐不吝指导我一下。。 下面我给大家介绍一下,如何使用sublime插件实现对scss文件的编译的吧。 首先,你想要使用sass的话,就必须依赖于ruby环境。所以,你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。建议大家不要使用谷歌浏览器 阅读详情

第一步,下载ruby

点开下载ruby的链接

下载好之后,就需要一步步进行安装了(建议大家把其安装在c盘)

安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。
ok,安装完毕!

打开cmd面板,输入 ruby -v可以看到ruby的版本号说明安装成功。

第二步,安装 Sass

Ruby自带一个叫做RubyGems的系统,用来安装基于Ruby的软件。我们可以使用这个系统来 轻松地安装Sass和Compass。要安装最新版本的Sass和Compass,你需要输入下面的命令:

  //安装如下(如mac安装遇到权限问题需加 sudo gem install sass)
  gem install sass
  gem install compass

安装完成之后,应该通过运行下面的命令sass -v来确认应用已经正确地安装到了电脑中:

第三步,安装sublime编辑器的sass插件和sass build插件

打开sublime

首先你要看的是在preference选项下有没有package control这个选项,如果没有的话,就表示你没有Package Control 插件(一个方便 Sublime text 管理插件的插件),这时,你就要从菜单 View - Show Console 或者 ctrl + ~ 快捷键,调出 console。将以下 Python 代码粘贴进去并 enter 执行,不出意外即完成安装

sublime text3

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

sublime text2

import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

完成了这步之后,再重新打开我们的sublime,按住ctrl+shift+p,并输入install,选择第一个Install Package,

在命令栏中输入"Sass"然后回车,然后在弹出的列表中选择Sass插件,通过鼠标单击或者回车进行安装,可通过左下角状态栏查看安装结果

在命令栏中输入"SassBuild"然后回车,然后在弹出的列表中选择SassBuild插件,通过鼠标单击或者回车进行安装,可通过左下角状态栏查看安装结果

按ctrl+shift+p,输入package,选择list packages,就看到了我们安装的插件列表

如果你看到了sass和sass bulid就说明插件安装成功了。

然后尝试着写一个scss文件,写完之后,按ctrl+b就可以实现sass文件的编译了,会生成一个自动编译生成css文件。

但很不幸我的sublime出现了一个报错[Decode error - output not utf-8]

第四步,解决sublime的编码报错

sublime text有时运行会输出以下错误信息:

[Decode error - output not utf-8]或者[Decode error - output not gbk]

错误信息意思就是脚本输出的信息不是某种指定编码。

用以下方法解决,有点麻烦,要有耐心,别弄错了哦!

1.在sublime text的安装目录下的Packages目录下找到Default.sublime-package,将这个复制出来,将后缀改名为zip.

它就是个zip文件,解压缩它,然后将其中的exec.py文件放到sublime text的DataPackagesUser目录下。

2.打开exec.py文件,找到类ExecCommand的append_data函数,在以下位置添加代码(可以把这段函数的代码替换就好了):

def append_data(self, proc, data):  
 if proc != self.proc:  
     # a second call to exec has been made before the first one  
     # finished, ignore it instead of intermingling the output.  
     if proc:  
         proc.kill()  
     return  

 #add start  
 is_decode_ok = True;  
 try:  
     str = data.decode(self.encoding)  
 except:  
     is_decode_ok = False  
 if is_decode_ok==False:  
     try:  
         str = data.decode("gbk")  
     except:  
         str = "[Decode error - output not " + self.encoding + " and gbk]\n"  
         proc = None  

 # Normalize newlines, Sublime Text always uses a single \n separator  
 # in memory.  
 str = str.replace('\r\n', '\n').replace('\r', '\n')  

 self.output_view.run_command('append', {'characters': str, 'force': True, 'scroll_to_end': True})

其原理就是在解码输出文字编码出错时再使用gbk试试,相当于utf-8和gbk两种编码都试试,这样可以解决编码错误的问题。

OK啦,我安装的时候就出现这些问题了。可以开始使用sass啦~~哈哈哈哈~

下面提供我参考的文章,如果还有其他问题可以仔细阅读一下。
https://www.sass.hk/install/(sass中文网)
http://shashanzhao.com/archiv...(解决编码报错)
http://www.cnblogs.com/qqqian...(sublime安装sass插件)

sublime配置及使用技巧 疯狂编程学习效果可视化写博客阅读优秀代码心态调整。 阅读详情

相关推荐

UVM概述及uvm_component和uvm_object(一)

UVM:Universal Verification Methodology(通用验证方法学) UVM:是建立在systemverilog平台上的一个库,提供了一系列的接口,让我们能够更方便的进行验证。验证平台组成: Driver:用来把不同的激励施加给DUT; Monitor:用来检测DUT的输出; Scoreboard:专门用来比较期望值与monitor检测到的DUT输出; Refer

南国之邱 1万+

❤sublime插件篇

❤ sublime插件篇(二)

林太白 6675

Win11安装Office2021

windows11安装office2021。

1万+

在sublime中安装sass编译插件

下载相应的版本。建议大家不要使用谷歌浏览器,因为他真得加载不出来。下载好之后,就需要一步步进行安装了(建议大家把其安装在c盘),这里需要注意的是:这个勾别忘了选,因为不选中,就会出现编译时找不到Ruby环境的情况。这时,我们在控制台输入ruby -v就可以得到我们的安装好的ruby的版本号等信息Ruby 安装完成后,在开始菜单中找到新安装的 Ruby,并启动 Ruby 的 Command 控制面板

woosido123的博客 5200

Protege本体建模实战:从零构建电影知识图谱并导入Neo4j

本体建模是知识图谱构建的基石,通过类、属性、实例和约束系统描述领域知识,为数据提供可复用的语义骨架。OWL作为本体描述语言的标准,配合Protege工具可实现可视化建模,并借助推理机验证逻辑一致性,提升模型可靠性。在工程落地中,本体模型常需导入图数据库如Neo4j,以支持高效的关联查询与业务应用。本文以影视领域为背景,完整演示Protege中定义类层级、创建对象/数据属性、填充实例,以及导出OWL文件并通过Python脚本转换为Neo4j节点与关系的全过程,同时梳理命名空间、匿名节点、编码等易踩坑点,帮助读

weixin_29047545的博客 282

BIOS/UEFI完全指南:从开机自检到超频魔改的底层硬件控制

计算机启动过程始于固件层,其核心是负责硬件初始化与引导的系统软件。传统BIOS基于16位实模式,寻址能力有限,而现代UEFI采用保护模式,支持图形界面与安全启动,实现了从概念到架构的革新。这一演进带来了显著的技术价值:更快的启动速度、更强的安全性以及对大容量存储设备的原生支持。在工程实践中,无论是解决“虚拟化技术禁用”问题、调整内存XMP配置以提升性能,还是为老主板“魔改”添加NVMe支持,都需要深入理解并操作BIOS/UEFI设置。掌握这些底层交互能力,是进行硬件调试、系统优化与故障排查的关键,也是连接抽

weixin_34236869的博客 459

Sublime安装插件 vue代码高亮 + scss高亮

效果 步骤 使用快捷键Ctrl+Shift+P打开命令窗口,输入pac,点击“Package Control: Install Package” 然后等一会(大概5秒),系统弹出包管理器的界面,搜索安装“vue-syntax-highlight” vue高亮插件已安装 同样办法,搜索安装scss高亮插件“SCSS” <推荐无广告的百度绿色版首页 baidu.rudon.cn > 重启sublime,重新打开vue文件 ok ...

Rudon滨海渔村的博客 2849

Java使用POI生成柱状图导出到word文档(柱状图)

本篇文章主要介绍,如何使用Apache POI组件生成柱状图导出到word文档中,具体步骤看下文。 一、实现效果 Java使用POI技术生成柱状图导出到word文档中,最终生成的柱状图如下所示: 二、环境准备 编程语言:Java 第三方依赖:Apache POI Apache POI依赖代码如下所示: <dependencies> <dependency> <groupId>org.apache.poi</groupId.

✅ Java 开发工程师 7376

Sublime配置SASS

Sublime配置SASS 字数654 阅读260 评论1 喜欢2 第一步:ruby安装 因为sass是依赖于ruby的,所以需要先安装ruby。官网下载ruby 安装过程中,请注意,勾选 Add Ruby executables to your PATH 选项,可以保证在系统中添加好环境变量,防止之后在编译软件中发生找不到ruby环境的错误。另,安装地址无特殊要求。

琳 2944

Google 二次签名 导致 Facebook , Google 登录失败

google 授权登录

xq610928的博客 1957

PyCharm 怎么不升级直接使用Jupyter Notebook

在PyCharm 中需要升级到 PyCharm Professional 版本,才能直接使用 Jupyter Notebook。从截图来看,Jupyter Notebook 已经成功启动,并且正在运行。这将在默认网络浏览器中打开一个新的标签页,显示文件浏览器界面。可以在这里创建和编辑。文件添加到 PyCharm 项目中,并使用纯文本编辑功能进行修改。支持与外部工具集成,可以配置它以调用命令行工具或脚本来启动。,参数可以根据需要设置,工作目录设置为项目根目录。,你仍然可以在本地环境中安装和运行。

Davina_yu的博客 998

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

很久之前就听到了sass和less,但是因为人懒(默默吐槽下自己),就没有去了解相关的知识。但是身为一个前端人员不了解sass好像有点low low 的,所以现在开始接触使用sass了。 万事开头难,总结一下sass的安装以及sass的编译 sass依赖于Ruby语言开发的,所以安装sass前需要先去安装下Ruby。 具体的Ruby的安装sass的官网上有,百度经验上也有很多,我下...

anmizhan5851的博客 301

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

sublime text 3 配置sass环境

一,什么是sass,有什么用 sass准确来说是一套很方便你来管理你css的框架,sass自己本身并不是css,但是有着一套跟css风格类似的规范,却又非常适合开发使用。具体方便的地方可以搜索sass的教程就能明白了。 但他终归不是css,也就是说不能被浏览器识别,那么想要在浏览器看到效果,还必须把你的sass文件转成css文件。 二,怎么把sass文件转成css文件 sass框架

aa841538513的博客 3625

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

sass ruby环境 安装配置,使用sublime text3 中sass

首先,你想要使用sass的话,就必须依赖于ruby环境。所以,你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。- 下载好之后,就需要一步步进行安装了(建议大家把其安装在c盘),这里需要注意的是: 这个勾别忘了选,因为不选中,就会出现编译时找不到Ruby环境的情况。 现...

dongjiong0213的博客 234

VB摄像头监控

该VB模块可对摄像头捕获的画面进行录像等,可在创建的窗口进行控制

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”,会出...

qq_35382207的博客 275

Sublime Text 配置 sass

Sublime Text 配合插件使用 sass

Kabutack的专栏 446

Sublime添加Sass插件,语法高亮

在sublime中安装sass插件和sass build插件了,打开我们的sublime 首先你要看的是在preference选项下有没有package control这个选项,如果没有的话,就表示你没有Package Control 插件(一个方便Sublime text 管理插件的插件...

chouchilei5210的博客 301

【亲测免费】 **Sass语法高亮插件安装与使用教程**

Sass语法高亮插件安装与使用教程 1. 项目介绍 本教程基于GitHub上的开源项目Syntax Highlighting for Sass,由P233开发维护。这是一个专为Sublime Text 3设计的插件,旨在提供精准的Sass(包括SCSS和Indented Syntax)语法高亮功能。要求Sublime Text 3版本在Build 3103以上。通过精确的语法分析,它支持CSS4...

gitblog_00459的博客 826

如何在sublime中使用sass

下面我给大家介绍一下,如何使用sublime插件实现对scss文件的编译的吧。 首先,你想要使用sass的话,就必须依赖于ruby环境。所以,你要下一个ruby。具体的链接应该是(http://rubyinstaller.org/downloads)。下载相应的版本。建议大家不要使用谷歌浏览器,因为他真得加载不出来。 下载好之后,就需要一步步进行安装了(建议大家把其安装在c盘)

哆来咪er的博客 1146

sublime text3 使用Koala 编译sass

1.使用kaola 官网下载地址:http://koala-app.com/index-zh.html git使用Koala  参展文档:https://github.com/oklai/koala/wiki/%E5%BC%80%E5%A7%8B%E4%BD%BF%E7%94%A8Koala 报错:补充。文件后缀名改.scss 原因: Sass 和 SCSS 其实是同一种东西,我们平时都...

milli236的博客 382

前端利器sass,scss安装

之前对比了下less和sass,发现sass使用会比较复杂,所以就抛弃了sa

凯子的专栏 2430

sublime如何使用sass

以前写前端的时候都是用css直接写样式,最近听大神提起sass,所以今天打算开始学习用scss来编译css样式,既然是学习,那就从头开始,不足之处,还望大神不吝赐教!!! 好了,开始了 sass有两种后缀名文件:一种后缀名为sass,不使用大括号和分号;另一种就是后缀为scss的文件,这种和平时写的css文件格式差不多,使用大括号和分号(这种比较常用)。   body ground: #ee...

luckydog 1606

使用sass_sass本地安装

sass安装教程完整版:一、安装rubysass编译需要ruby的支持,如果还没有安装先去安装安装完成ruby后使用 `gem install sass`安装sass查看是否安装成功 `sass -v`1、官网安装比较慢,https://rubyinstaller.org/downloads/进入到 Ruby 官网地址进行下载, 选择 32bit 或 64 bit 点击下载。一般网上找ruby安装...

weixin_39853210的博客 152

ruby以及sass安装、使用

sass安装需先安装ruby,安装过程参考sass中文网。-选择最新版ruby下载安装,勾选“add to path”; -查看是否安装成功,替换原gem源为https://gems.ruby-china.org/,如果有SSL证书问题而又懒得解决的,直接以http头替换https头; gem sources --remove https://rubygems.org/ gem source

Small_Dark的博客 894
上一篇: sublime text 3 配置sass环境
下一篇: jquery (function($){}) 和 $(function(){})
aaa333qwe
博客等级 码龄12年 207粉丝 96原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值