一起学习网 一起学习网

Sass开发工具

上一节我们只是配置了一下Sass的开发环境,只有把Sass开发环境配置好,我们才可以开始编写Sass代码。那么小伙伴可能就有疑问了:我们具体在哪写Sass代码呢?

 

一、使用本地编辑器开发Sass

之前我们都说过了,Sass只是用来辅助CSS开发的。编写Sass代码当然是借助我们自己的本地编辑器啦。总不能写Sass用一个编辑器,而写HTML和JavaScript又用另外一个编辑器,对吧?要是这么麻烦,还学个毛线Sass。

每个人使用的编辑器都不一样,有些人习惯用Sublime Text,有些人习惯用Webstorm。不管你用哪一种编辑器,都会有相应的Sass插件。小伙伴们自行搜索一下“如何在XXX(如Sublime Text 3)中编写Sass”,会有详细的插件安装教程以及使用教程。因为每一种编辑器的安装以及使用方法都不一样,这里就不详细展开介绍了。

如果小伙伴们觉得使用的本地编辑器安装Sass使用插件比较麻烦的话,也可以使用专门的Sass编译工具:Koala。Koala(考拉)是一个非常强大的CSS预处理语言编译工具,它不仅支持Sass,而且还支持Less、Compass等,使得开发者可以更高效地进行开发。具体使用,可以参考这里:Koala安装以及使用。

我们都知道Sass文件后缀名都是“.scss”或者“.sass”,我们不能像引入CSS文件那样直接使用link标签引入Sass文件的。也就是说,我们直接引入Sass代码是不会生效的。因此,我们必须将Sass代码转换为CSS代码,才能被页面所用,这个过程被称为“编译”。

在本地编辑器中编写Sass之后,也需要编译成CSS才能使用。

 

二、使用在线工具学习Sass

在这个Sass教程的学习中,我们建议大家使用sassmeister来辅助学习。sassmeister是Sass官网为我们提供的一个在线编辑器,我们只需要在左边编写Sass代码,右边就会自动编译出CSS代码。sassmeister官方地址:进入官网

当然,在实际开发中,我们还是要借助本地编辑器来开发的。“学习”跟“开发”不一样,在学习的过程中,使用sassmeister来得更加方便一些。

Sass开发工具