Scss是Sass3版本当中引入的新语法特性，完全兼容css3的同时继承了Sass强大的动态功能。scss文件可以编译为css文件，下面我们来看一下将scss编译为css的方法。
我们可以使用node来将scss编译为css。下面我们来看一下使用node将scss编译为css的方法。
使用nodejs的npm包安装sass
1、安装sass
npm install sass
2、使用以下命令将scss编译为css
sass style.scss:style.css
成功编译后：
注意：路径要书写正确
3、sass提供四种编译选项
nested：嵌套缩进的css代码，它是默认值。
expanded：没有缩进的、扩展的css代码。
compact：简洁格式的css代码。
compressed：压缩后的css代码。
生产环境当中，一般使用最后一种方法
sass --style compressed style.scss style.css
也可以通过sass监听某个文件或目录，一旦原文件有变动，就会自动生成编译后的版本
sass --watch sass/style.scss:css/style.css
4、创建公用的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文件。
在这个项目中，由于他并不太复杂，只使用了一个主样式：style.scss。并且将需要的东西通过@import引入进来：
此时你只需要将style.scss编译成style.css，引用到你的项目就行了。
其实你也可以按照你自己的需求去组装，假设，首页我只需要首页用到的样式，那么你完全可以创建一个index.scss的SCSS文件，然后将需要的引入进来 接下来，在index.html引用编译出来的样式文件index.css即可（文件名你可以换成自己想要的）。
