想想学习Sass时间也有差不多一年的光景了。在这一年来的时间中,在GitHub不断阅读Sass相关的源码。也在国外涉猎了相关的知识,也让自己初步掌握了一些Sass一些基础知识与技能,当然也让自己喜欢上了Sass,并且在国内致力于Sass的推广。希望各多的前端开发者喜欢上Sass,也希望Sass能真正为前端人员带来好处。
最近看到越来越多的同学在学习和使用Sass,感到非常的高兴,终于有更多的同行朋友加入到这个行列。同时也看到了很多同学了解了Sass,掌握了一些Sass技术,但就是不知道如何结合到项目中。那么今天,我就想和大家一起探讨一下如何在项目中使用Sass。
为什么要在项目中使用Sass
听到最多的一句话就是我会CSS,我能使用CSS写项目,为什么我要花时间去学习Sass,一个自己并不了解的东西,一个对于自己来说是全新的东西?看到这样的问题,让我想起了年讨论CSS的时候,很多同学同样有这样的凝问,CSS真的会来?我真的要学习CSS?现在,时间证明了一切。我还是想说,很多东西并不是需要的时候才去学,机会是给有准备的同学。
似乎有些离题了,我们还是回到今天的话题中来,为什么要在项目中使用Sass?在此,我仅想说说我个人的一些看法。
首先,CSS能完成的事情,Sass一样能完成,而且可能更好的完成,另外CSS做不到的事情,却有很多Sass能做到,比如:
Sass可以定义变量,混合宏,%placeholder;Sass可以定义函数;Sass可以使用
if、fo、while这样的控制指令;Sass可以使用JSON数据(map);当然,除了这些基本功能之外,在项目中使用Sass,还可以让你更好的维护项目,扩展项目,复用项目等。还能让你的代码更简洁。
说到这里,还有一种声音在说,小项目有必要使用Sass?试问,项目有大小之分吗?既然Sass能帮助我们更好的开发、管理、维护项目,那么为什么只允许在大项目中使用Sass,而不能在小项目中使用呢?难道小项目就需要维护吗?不需要管理吗?带着这样的问题,往下阅读,或许你会有些改观。
怎么在项目中使用Sass
说了这么多,同学们更为关心的是怎么在项目中使用Sass。并不太在意Sass有多好。因为这样的争论也实在是没有太多的意义。那么我们就不说其他的,就说怎么在项目中使用Sass吧。
经过在项目中使用Sass,我自身有一些看法,或者说我的操作方式吧。也当是经验吧,希望对初学者有所帮助。
创建运行Sass的环境
要想在项目中正常使用Sass,你得先保证你的电脑上能运行Sass的环境。这也是Sass受限,也是不被大家爱戴的原因之一。很多人讨论使用Sass,需要先安装Ruby环境。对于不喜欢命令编译的同学,还需要安装GUI编译器。
其实安装Sass环境也并不是件难事,就好比配Wamp环境,整完一次就OK了。但就是这么第一次的安装,给初学者带来很多的障碍,也成了同学们学习Sass和使用Sass的拦路虎。如果你只是想学习或者了解Sass的话,可以不用在本机上安装Sass,你可以借助在线编辑器,比如:SassMeister、CodePen。而且他们都支持即写即所得。如果你对Sass已有一定的基础,想在项目中使用,已是蠢蠢欲动了,那你还是离不开在电脑中安装Sass环境。至于如何在电脑上安装Sass,在这篇文章中就不做过多的阐述,感兴趣的同学可以阅读下面的文章:
Sass安装Sass编译Sass调试InstallSassINSTALLINGSASSANDCOMPASSUBUNTU1..0SettingUpSassonWindowsHowtoinstallSasswithCompassonWindowsHowtoinstallSASSwithCompass–Windows7stepbystepguide
我想根据上面的教程介绍,在你的电脑上安装Sass不会是件难事。不过在我们天朝,有些东西被墙了,时常让你安装Sass不成功。在这里给大家介绍一个简单的方法:
假设你已成功安装好了Ruby。先将Sass下载到本地。并打开你的命令终端:
geminstall
此时先不要回车,将你下载下来的Sass安装包,用鼠标拖到"install"后面,此时你在命令终端,可以看到:
geminstall/Users/ain/Downloads/sass-..1.gem
这个时候再回车,这样就OK了。为了确认是否安装成功,只面要输入:
sass-v
如果能看到Sass版本号,就表示你已成功安装了。接下来你就可以做你想做的事情了。
注:不同的系统,不同的用户和版本,对应相关路径和信息都会不一样“/Users/ain/Downloads/sass-..1.gem”。
创建公用的Sass项目模板
在做项目时,不管什么项目,他们之间总是有一些可以共用的部分。比如说重置样式、公用样式、模块组件、UI库等。那么在Sass项目中也是如此。为了避免在每个项目中做一些相同的事情,那么你可以在你的电脑上创建一个公用的Sass项目模板。比如我创建的:
在这样的一个模板中,每个Sass目录下的文件夹都对应着各种分类的_xxx.scss文件:
base:放置一些基本样式的SCSS文件,比如重置样式_normalize.scss,基本样式_base.scss,文本排版样式_typography.scss等