sass使用指南

sass和less一样都是css预处理器，Sass 有两种语法,扩展名分别为.sass和.scss 具体的区别可以看我分享的另外一篇文章gulp在工作中的应用这个需要先安装ruby然后再安装sass，然后根据其提供的命令来编译sass，具体例子可以参考链接1和链接2，但是我使用gulp-sass来编译sass，所以上述步骤可以直接省去

关于它的用法别人已经写了很多例子了，这里记录下我工作时遇到的问题

1.在使用@mixin时应该注意的问题

minxin用来定义重复使用的代码块，就比如这样

在调用时使用@include具体例子如下：

但是我们需要注意@include定义好的Mixins类似于css中的粘贴复制，会产生很多重复的代码，导致css文件臃肿，所以Mixins只适合那种需要通过传递参数来快速创建样式的情况，sass可以帮助我们处理臃肿的兼容样式

如果复用的代码块不用传递任何参数时，我们可以采用继承的写法

2.sass继承写法

3.采用继承和minxins混合的方式往往能够达到最佳的效果

经过预处理以后css样式如下：

4.合理的安排自己的sass文件目录

一个不好的例子，比如我编写的sass，所有的变量，代码块，以及函数都放在一个sass文件里，这样当需要编写很多css样式时，变得非常混乱和不好维护

不合理的scss编写结构

看了别人分享的帖子，我学习了下，并在我的项目中实际操作如下：

如果是项目比较小，我们可以在scss文件夹下新建base.scss，module.scss，global.scss

base.scss

在编写base.scss的时候，记得一定要有相应规范，说明白变量的含义，如上图我觉得就是一个好的写法

module.scss

global.scss我这里叫common.scss

但是当我们的项目比较大时，就要对此进行合理的规划，我安排的项目结构如下

scss文件结构

在监控的时候只需要监控global.scss文件就可以了，我采用gulp来管理的项目

gulpfile.js

关于sass在项目中的更高级的用法，我也在不断地学习，所以这里贴上两篇文件用sass编写常用的样式和sass复杂的写法，以后再尽量用到自己的项目中，然后再工作中遇到了问题，再来总结经验丰富这篇文章