谈谈Sublime Text和SASS之间的一些事

作者:admin2017.07.14来源:Web前端之家浏览:1474评论:0
关键词:SublimeTextsass

有时候感概时间如梭,回想工作的这些年,互联网的发展的确太快。就拿WEB编辑器来说吧,最开始用的dreamweaver,可谓风靡一时吧,随着新兴的编辑器崛起,它慢慢被遗弃,取而代之的是更加轻便的atom、Sublime Text,功能强大的webstorm等等。如果选择一款适合自己的编辑,这个还得取决于电脑的配置。看我在公司的电脑配置。

1.png

有时候真想骂街,装个功能强大的Webstorm卡得动不了,最后老老实实选择Sublime Text。话说回来,我觉得Sublime Text是目前最轻便(文本除外)的编辑器了,占用内存小,插件功能也多,Sublime Text3最新版本使得功能更加完善,推荐前端攻城师用,当然后端攻城师也可以考虑下,当然你的电脑不是跟我的一样渣渣,值得推荐使用Webstorm。

OK,废话少说,还是回到今天的主题:Sublime Text和SASS。

Sublime Text3的安装

首先我们安装ST3(最新版本3126),大家自己去百度搜索了。安装完成后,我们得把Package Control装下,步骤如下:

1、sublime text里按快捷键调出控制台:Ctrl+`(或者点击状态栏的“查看”)。

2、我们从官网(https://packagecontrol.io/installation#Simple  )复制一段代码:

import urllib.request,os,hashlib; h = 
'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76';
 pf = 'Package Control.sublime-package'; ipp = 
sublime.installed_packages_path(); urllib.request.install_opener( 
urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = 
urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', 
'%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error 
validating download (got %s instead of %s), please try manual install' %
 (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

粘贴到控制台输入框里,然后回车运行,然后重启ST3,就可以看到Package Control了。

3.png

基本安装就到此完毕。

Ruby安装

因为sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby
在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境。

Sass和Sass build安装

打开Package Control,选择intall package。

4.png

这个得要等会,才会弹出插件库。

5.png

然后搜索sass和sass builder进行安装。

实战演练

上面的都安装完毕后,我们来测试一个简单实例。

先建一个根目录,里面新建一个test.scss,书写一段sass代码,如下:

$color:#000;//定义一个颜色变量
body {
background:$color;
}
.font{
background:$color;
}

然后我们按快捷键ctrl+B(编译),如果在底部状态栏看到这个效果,就说明编译成功。如下图:

6.png

然后回到我们新建的根目录里面自动生成了文件test.css,你可以打开,这个就是sass编译后的CSS代码。如果你想编译成压缩版的CSS代码,可以选择下编译方法,如下图:

8.png

总结

学习完后,是不是觉得很简单呢,不过话说话来,要应用到具体项目当中,我们需要熟练掌握“sass的写法和应用”,这是下篇文章的内容了。

ST3的牛逼的插件非常多,如果你想学习,就可以关注"Web前端之家",这也是我最近研究的一部分,来跟我一起学习吧。如果你有任何问题都可以留言或者加入我们的前端群:295431592,来互相伤害吧!!!

温馨提示本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接

已有0人参与

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新留言

  • 哈哈

    这eb2c0e8c839166f3036c5348f77293c9是什么呀...

  • admin

    客气了,请继续关注我们QQ群:295431592...

  • essaypinglun

    感谢楼主的分享...

  • 游客1

    非常好...

  • 游客

    这些插件都不错的...

  • 第三方

    似懂非懂...

  • admin

    有些是可以的,需要叠加很多层。...

  • 素材火

    纯css能实现吗?...