继上篇WIN7成功安装SASS记录之后，本周又把SASS如果使用在项目中研究了一番，本次内容是将之前的一个普通的静态页面转化为一个使用SASS的项目，体验了一些基础的SASS规则，像变量、嵌套、判断以及运算等基本的规则，走通了在项目中从scss文件到css文件的流程，没有使用专门的SASS编辑工具和引用第三方SASS库，都是原生态的做法。下面说下我的操作过程：
1、确定项目文件架构
与正常的项目差不多，看我生成完成之后的目录截图如下：
.sass-cache 为sass自动生成缓存文件，无需理会
css为生成css文件的存放目录，开始时应该是个空文件夹
images和js为原来切图文件及js存放目录，和sass没有关系
sass问sass源文件scss文件存放目录
这次demo比较简洁，使用了这样结构，复杂的项目文件结构可以根据具体项目来布局结构。
2、从css文件转化成sass文件scss
scss文件格式完全兼容css，可以直接降css文件后缀修改为scss就得到了一个sass文件，将其中通用公用部分抽取出来定义成一个变量或mixin(混合类似与js里面的一个小函数)，这里面最常用的就是颜色的定义，一般一个网站主流颜色就那几种，还有按钮样式等等，都极大的方便了以后的修改与调整。
3、再从从scss到css
在scss里面做了一些修改与调整之后，我们要将scss再生成css文件以便网页调用，这里就要使用之前安装过的sass环境，使用sass命令行即可生成css文件。
以下4个命令都是将指定的scss文件生成到指定的css文件，各自都有微小的区别：
a.直接生成完整的css文件一次
sass sass/_index.scss:css/index.css
b.直接生成压缩的css文件一次
sass --style compressed sass/_index.scss:css/index.css
c.监听scss文件的变化，只要保存一次就生成一次css，完整的
sass --watch sass/_index.scss:css/index.css
d.监听scss文件的变化，只要保存一次就生成一次css，压缩的
sass --watch --style compressed sass/_index.scss:css/index.css
至此，一个简单的sass项目流程就走通了，但这只是一个开始，sass强大的用法，还需要慢慢的去掌握，掌握好了sass能让css书写更上几层楼，如果不能很好的运用sass那可能还不如不用他。这个简单的demo里面我主要是想讲sass的整个流程，没有介绍具体sass的写法，我也是才了解了基础的用法，后续会逐步的更多的使用他，建立一个sass基础库，希望在成熟之后逐步推广开来。网络上sass的库也已经有不少了，但是我觉得根据我们自己平时经历的项目，整理出来的基础库更能符合我们自己的项目，大而全的东西有时没有必要。
感谢阅读，如果您发现文章中有表述不准确，欢迎提出来，也欢迎交流相关问题，你可以去这里进行一对一问答交流。
转载请注明：Rockyxia Web技术博客 » SASS在项目中的实战
感谢阅读，如果您发现文章中有表述不准确，欢迎提出来，也欢迎交流相关问题，你可以去这里进行一对一问答交流。