webpack和sass功能简介

1.webpack

webpack 是一个打包工具，为什么需要打包？因为有的人的脚本开发语言可能是 CoffeeScript 或者是 TypeScript，样式开发工具可能是 Less 或者 Sass，这都需要工具把它们“编译”成浏览器能识别 Javascript 和 CSS，其次webpack 能执行图片压缩，文档(js， css)打包合并，代码检查等等。webpack就是干这个的。

总之：1.识别多种脚本开发语言，并编译成浏览器能识别的代码   （例如：es6,less,sass,typescript等）

                  2.执行多个文档的压缩合并（js，css,图片）

                  3.能将CSS3中的属性自动适应多个浏览器。(例如：-webkit-,-mos-)

  

2.Sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库有助于更好地组织管理样式文件，以及更高效地开发项目。

使用变量：

 

镶嵌：

原先：

使用sass后：

 

混合 ：

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

原先：

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：