导航:首页 > 编程大全 > sass编译工具

sass编译工具

发布时间:2024-04-25 21:19:24

1. sass和scss区别

SCSS 是 Sass 3 引入新的语游仔法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。可以简单理解为scss是sass的一个升级版本,完全兼容sass之前的功源誉能,又有了些新增能力。神裂汪语法形式上有些许不同,最主要的就是sass是靠缩进表示嵌套关系,scss是花括号。

2. 如何安装sublime text 3 sass 高亮插件

第一步,下载
点开下载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啦~~哈哈哈哈~

阅读全文

与sass编译工具相关的资料

热点内容
有个收废纸的app叫什么 浏览:947
js去掉页面双击选中 浏览:434
php获取json数据 浏览:21
四叶草引导黑苹果教程 浏览:851
营销建网站怎么建 浏览:820
秘密的秘密安卓下载 浏览:737
数字营销程序化交易 浏览:545
后期app都有哪些 浏览:462
ipad蜂巢移动数据怎么收费 浏览:71
青鸟java和传智的java 浏览:42
在微信中打开的dwg文件存在哪里 浏览:667
终极解码2014设置教程 浏览:810
拍照破解手机图案密码 浏览:885
安卓shell查看进程 浏览:158
mysql数据库longtext 浏览:568
嵌入式linux有哪些特点 浏览:587
展开收缩代码 浏览:189
archlinuxfn 浏览:744
文件档案管理系统毕业设计 浏览:391
网络机顶盒电视没信号怎么回事 浏览:384

友情链接