sass基础以及实战

时间 2019-11-29

标签 sass 基础以及实战繁體版

原文原文链接

为何要在项目中使用Sass

听到最多的一句话就是我会CSS，我能使用CSS写项目，为何我要花时间去学习Sass，一个本身并不了解的东西，一个对于本身来讲是全新的东西？看到这样的问题，让我想起了2010年讨论CSS3的时候，不少同窗一样有这样的凝问，CSS3真的会来？我真的要学习CSS3？如今，时间证实了一切。我仍是想说，不少东西并非须要的时候才去学，机会是给有准备的同窗。css

彷佛有些离题了，咱们仍是回到今天的话题中来，为何要在项目中使用Sass？在此，我仅想说说我我的的一些见解。html

首先,CSS能完成的事情，Sass同样能完成，并且可能更好的完成，另外CSS作不到的事情，却有不少Sass能作到，好比：前端

Sass能够定义变量，混合宏，%placeholder；
Sass能够定义函数；
Sass可使用@if、@fore、@while这样的控制指令；
Sass可使用JSON数据(map)；

固然，除了这些基本功能以外，在项目中使用Sass，还可让你更好的维护项目，扩展项目，复用项目等。还能让你的代码更简洁。node

说到这里，还有一种声音在说，小项目有必要使用Sass？试问，项目有大小之分吗？既然Sass能帮助咱们更好的开发、管理、维护项目，那么为何只容许在大项目中使用Sass，而不能在小项目中使用呢？难道小项目就须要维护吗？不须要管理吗？带着这样的问题，往下阅读，或许你会有些改观。linux

怎么在项目中使用Sass

说了这么多，同窗们更为关心的是怎么在项目中使用Sass。并不太在乎Sass有多好。由于这样的争论也实在是没有太多的意义。那么咱们就不说其余的，就说怎么在项目中使用Sass吧。css3

通过在项目中使用Sass，我自身有一些见解，或者说个人操做方式吧。也当是经验吧，但愿对初学者有所帮助。git

建立运行Sass的环境

要想在项目中正常使用Sass，你得先保证你的电脑上能运行Sass的环境。这也是Sass受限，也是不被你们爱戴的缘由之一。不少人讨论使用Sass，须要先安装Ruby环境。对于不喜欢命令编译的同窗，还须要安装GUI编译器。github

其实安装Sass环境也并非件难事，就比如配Wamp环境，整完一次就OK了。但就是这么第一次的安装，给初学者带来不少的障碍，也成了同窗们学习Sass和使用Sass的拦路虎。若是你只是想学习或者了解Sass的话，能够不用在本机上安装Sass，你能够借助在线编辑器，好比：SassMeister、CodePen。并且他们都支持即写即所得。若是你对Sass已有必定的基础，想在项目中使用，已经是蠢蠢欲动了，那你仍是离不开在电脑中安装Sass环境。至于如何在电脑上安装Sass，在这篇文章中就不作过多的阐述，感兴趣的同窗能够阅读下面的文章：web

我想根据上面的教程介绍，在你的电脑上安装Sass不会是件难事。不过在咱们天朝，有些东西被墙了，时常让你安装Sass不成功。在这里给你们介绍一个简单的方法：bootstrap

假设你已成功安装好了Ruby。先将Sass下载到本地。并打开你的命令终端：

gem install

此时先不要回车，将你下载下来的Sass安装包，用鼠标拖到"install"后面，此时你在命令终端，能够看到：

gem install /Users/airen/Downloads/sass-3.3.14.gem

这个时候再回车，这样就OK了。为了确认是否安装成功，只面要输入:

sass -v

若是能看到Sass版本号，就表示你已成功安装了。接下来你就能够作你想作的事情了。

注：不一样的系统，不一样的用户和版本，对应相关路径和信息都会不同“/Users/airen/Downloads/sass-3.3.14.gem”。

建立公用的Sass项目模板

在作项目时，无论什么项目，他们之间老是有一些能够共用的部分。好比说重置样式、公用样式、模块组件、UI库等。那么在Sass项目中也是如此。为了不在每一个项目中作一些相同的事情，那么你能够在你的电脑上建立一个公用的Sass项目模板。好比我建立的：

在这样的一个模板中，每一个Sass目录下的文件夹都对应着各类分类的_xxx.scss文件：

base：放置一些基本样式的SCSS文件，好比重置样式_normalize.scss，基本样式_base.scss，文本排版样式_typography.scss等
components：放置一些公用组件，好比：按钮_buttons.scss、表单_form.scss、表格_tables.scss、选项卡_tabs.scss等
helps：放置一些辅助功能性文件，好比：_css3.scss、_variables.scss、_mixins.scss、_helpers.scss和_function.scss等
layout：放置一些跟页面布局相关的，好比：_layout.scss、_header.scss、_footer.scss、_sidbar.scss等
pages:放置跟具体项目页面相关的样式文件。
themes：对于一些有先后台页面，或者需换肤的项目，就能够将相关文件放置在这里。
vendors：引用的外部插件或者框架的SCSS文件，好比_bootstrap.scss、_foundation.scss。
style.scss这是主样式文件，最终编译，就编译这个问题。固然根据项目大小，可作一些其余处理。好比说针对不一样的页面,建立不一样的page_xxx.scss文件。

固然每一个人或许会有不一样的方式方法。建立好了这样的一个模板以后，之后只要有新项目，就能够复制、粘贴，而后修改项目名称，这样就便可。

不过，对于一些公共使用的部分，仍是尽可能在公用模板中修改。好比说你添加的混合宏mixin、占位符%placeholder、函数功能function。还有就是一些公用的组件。

或许这样复制并不方便，那是否能够考虑像Compass这样的框架，本身写一个可安装的功能呢？或者将公用的部分，引用到你全部须要的项目中？不过这两种方法，我都没有尝试过。其一，本身不会写那种带有gem安装功能的东东，其二，没有单独试过在不一样的项目中使用相对路径调用资源。若是您尝试过，记得与咱们一块儿分享。

组织Sass项目

其实就是将公用的这个看成是一个Sass项目，只不过这个Sass项目是用来作备用的，能够无限制的复用。那么在建立这样的一个项目时，就须要合理的组织，便天后期的使用。

早前翻译过John W. Long的一篇文章：如何组织一个Sass项目。上面的文件组织结构的思路就是来源于此。固然，你们还能够参考一些大型Sass框架作为参考：

Compass

Foundation

Bootstrap-Sass

除此以外，还有：

Sass项目的编译与调试

具有上述以后，你在具体编写Sass的时候，还须要掌握Sass的编译和调试。众所周知，在项目中具体引用的是.css文件而不是.scss或者.sass文件。因此你要将写好的Sass编译成须要的CSS。对于如何编译？其实方法不少种，你要是喜欢使用命令，你能够直接在命令终端编译，若是你不喜欢命令编译，你还可使用GUI这样的界面工具辅助编译。具体的能够阅读：

除此以外，你要是对Node,Grunt和Gulp熟悉，你还可使用他们帮你编译Sass。好比《Nodejs+Grunt配置SASS项目自动编译》一文所介绍。

至于如何调试，前端开发人员都知道可使用Firebug这样的工具来调试CSS。其实使用Sass的同窗，也很是期待能在Firebug下直接调试Sass。那么如今在Chromet和Firefox浏览器都支持了Sass的Soucemap功能，能够直接在浏览器中调试相应的Sass。以下面的几篇文章所言：

Sass在项目中的实战

说了这么多，咱们仍是以一个实例来作示例吧，这样形象一些。假设收到这样一个项目：

在“后台”和“前台”各对应了一些设计图。这些咱们并不须要太多关心，他们长成什么样子。先将建立好的公用Sass项目复制一份，并将其粘贴到你本地项目环境中，修改为你须要的项目名，好比我这里将其称为“tuhaokuai”。

抛弃其余因素不看，仅看"sass"目录，Sass公用项目和新项目“tuhaokuai”长得是如出一辙。固然，在里面会不同的。主要在pages目录中，针对所需的页面建立了不一样的页面文件：

如此一来，针对不一样的页面，添加其对应的样式代码，好比：

_index.scss

_mysite.scss

其余文件就不一一展现了，看上去是否是很是清楚。其实简单点说，这些东西就是一些零件，咱们要让项目样式生效，就须要把须要的零件装上去，而后固定他。这样就行了。在这个项目中，因为他并不太复杂，只使用了一个主样式：style.scss。而且将须要的东西经过@import引入进来：

此时你只须要将style.scss编译成style.css，引用到你的项目就好了。

其实你也能够按照你本身的需求去组装，假设，首页我只须要首页用到的样式，那么你彻底能够建立一个index.scss的SCSS文件，而后将须要的引入进来：

接下来，在index.html引用编译出来的样式文件index.css便可（文件名你能够换成本身想要的）。

结论

在这篇文章中主要介绍了本身如何将Sass运用到实际项目之中。简单人介绍了为何要在项目使用Sass，之前使用Sass以前要作些什么？又是如何具体操做。但愿这篇文章对初学者有所帮助。也但愿更多的同还来分享项目中使用Sass的体验与碰到的问题。并且又是如何解决这些问题。