如何在项目中使用sass,提高开发效率

首先，先学会sass的基本用法，可以从官方文档中进行学习，本文给出链接、不再赘述。

https://www.sass.hk/

其次要合理搭建项目结构。本文主要以我在项目中用到的sass来进行讲解。
最后要把sass文件编译成css文件（浏览器不能解析sass语法）

1、在根目录下新建scss文件夹和css文件夹
2、在scss文件夹下新建7个scss文件
采用模块化思想，把css样式主要分成6大类：

_variable.scss: sass变量，常用的颜色字体大小等

_function.scss：功能性的sass代码，元素类名以f-开头

_reset.scss：重置样式

_unit.scss：最小元素样式，元素类名以u-开头

_module.scss：模块样式，元素类名以m-开头

_grid.scss：布局样式，元素类名以g-开头

_style.scss: 把上面6个文件导入到这一个文件夹中，后面就只要编译这一个文件即可。

style.png

在css文件夹中新建style.css文件，里面不需要写css样式，为后面编译scss做准备
文件目录如下：

test.png

3、根据scss语法书写样式，把写好的项目代码（整个项目）导入到Koala软件中，如下图所示：
koala软件下载链接附上：

koala.png

4、点击style.scss，右侧抽屉打开，点击compiledj进行编译，选择目标文件夹style.css（编译好的css导入到事先创建的style.css文件中），编译成功之后，可以点击查看文件内容。

test2.png

当然，你可以通过选择Output Style选择编译的css样式是什么格式的，nested(嵌套的)、expanded(展开的)等等。还可以通过Options中的Autoprefix为你的css代码自动添加浏览器前缀，省心省力。
总结：利用sass写样式 ，结构清晰，代码简洁，还方便复用样式。再加上koala工具，一键编译，使用不要太方便。