随着技术的发展，css已经发展到第三阶段css3.css3可以支持更多的动态效果。以前动画、转场、计算等需要js实现的功能，现在多用到。可以用css来实现，性能更好。当然，随着业务的需要，在编写css的过程中，为了让css具有js的可重用性、灵活性、模块化开发以及更好的样式文件管理，类似sass这样的css框架应运而生。css预处理器Sasssass可以解决css的一些不足，包括但不限于：1、变量：声明一个变量，使用$content:"Non-nullcontent"；.main{content:$content;}编译为.main{content:"Non-nullcontent";}2、嵌套：可以更好的明确父子层次关系，方便修改和查找，减少样式命名。main{.redbox{背景颜色：#ff0000;颜色：#000000；}}编译为.main.redbox{background-color:#ff0000;颜色：#000000；}3.引用混合风格：一种定义，多种使用编译前：@mixinclearfix{display:inline-block;&:{content:".";display:block;height:0;clear:both;visibility:hidden;}}.box{@includeclearfix}编译为：.box{display:inline-block;}.box：在{content:".";display:block;height:0;clear:both;visibility:hidden;}4.函数说明：开始像js一样编程$grid-width:40px;$gutter-width:10px;@functiongrid-width($n){@return$n*$grid-width+($n-1)*$gutter-width;}.sidebar{宽度：网格宽度（5）;}编译为.sidebar{width:240px;上面四种是最常见的。更多用法请到Sass官网了解更多。Css预处理器让前端开发者大大提高css开发速度，少了和sass类似的Stylus。说说使用sass遇到的一些问题1.基于Ruby，必须安装Ruby才能使用sass，内部使用Ruby编译。2.需要安装node-sass。目前前端使用gulp和webpack构建工具。如果使用sass，webpack构建必须安装sass-loader，sass-loader依赖node-sass。你一定知道node-sass的安装速度极慢，尤其是在使用window系统进行开发时，当npm<5.4时，node-sass经常安装失败。3.全局变量的污染。在多人开发过程中，在定义选择器时，需要考虑到其他地方是否使用了相同的名称。4.静态编译：预编译，显示的页面是已经编译好的css。4.不支持futurecss。目前处于css3阶段，css未来的发展方向值得期待。未来CSS会支持更多的属性和功能，包括变量、嵌套、值计算等。postcss新革命postcss定义：PostCSS是一个用JS插件转换CSS的工具。这些插件可以支持变量和混合、转换未来的CSS语法、内联图像等。Postcss优点：1.支持futurecss：writewithcssnextFuturecss(postcss-cssnextplugin):root{--heading-color:#ff0000;}/customselectors/@custom-selector:--headingsh1,h2,h3,h4,h5,h6;/usage/:--headings{color:var(--heading-color);}通过cssnext，上面的代码会被处理成如下内容h1,h2,h3,h4,h5,h6{color:#ff0000;}2.编译速度大大提高promote.PostCSS声称比预处理器快3-30倍。3、丰富的插件系统，解放你的双手。4.CSS模块化，将作用域限制在组件内，避免了全局作用域的问题，再也不用担心样式名重复了。postcss属于css后处理器，动态编译css，即运行时。编译。postcss本身不会对你的css做任何事情，你可以使用postcss作为shell，随着postcss的生态，衍生出更多的postcss插件，可以帮你解决95%以上的css问题，如果你需要自定义一个属于自己业务需求的css编写规范，那么你也可以自己开发一个具体的postcss插件。postcss配置在webpacknpminstallpostcss-loader,postcss-cssnext:npminstallpostcss-loaderpostcss-cssnext-Dwebpack.config.jspostcss插件参考postcss-modules和react-css-modules自动隔离组件内的选择器。postcss-autoreset是使用全局重置的替代方法，它更适合可隔离的组件。postcss-initial添加了all:initial支持，它重置所有继承的styles.autoprefixer添加厂商前缀，使用来自CanIUse的数据ostcss-assets插入图像尺寸和内联文件。postcss-sprites生成图像精灵。postcss-inline-svg允许您内联SVG并自定义其样式。postcss-write-svg允许您编写简单的SVG直接在你的CSS中。postcss-syntax通过文件扩展名自动切换语法。postcss-html在类HTML文件的
