scss，less等css方案
目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。它们有个统一的名字——css预处理器。
这些预处理器解决了css的一些缺憾：
· 语法不够强大，不能够嵌套书写，不利于模块化开发
· 没有变量和逻辑上的复用机制，导致在css的属性值中只能使用字面量形式，以及不断重复书写重复的样式，导致难以维护。
css预处理器给出了非常可行的解决方案：
1. 变量：就像其他编程语言一样，免于多处修改。
o Sass：使用「$」对变量进行声明，变量名和变量值使用冒号进行分割
o Less：使用「@」对变量进行声明
o Stylus：中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有『等号』。但需要注意的是，如果用“@”符号来声明变量，Stylus会进行编译，但不会赋值给变量。就是说，Stylus不要使用『@』声明变量。Stylus调用变量的方法和Less、Sass完全相同。
2. 作用域：有了变量，就必须得有作用域进行管理。就想js一样，它会从局部作用域开始往上查找变量。
o Sass：它的方式是三者中最差的，不存在全局变量的概念
o Less：它的方式和js比较相似，逐级往上查找变量
o Stylus：它的方式和Less比较相似，但是它和Sass一样更倾向于指令式查找
3. 嵌套：对于css来说，有嵌套的写法无疑是完美的，更像是父子层级之间明确关系
o 三者在这处的处理都是一样的，使用「&」表示父元素
Stylus：
stylus跟less sass做的是同样的事情，之间有很多共同的地方，比如变量、计算的想法。
书写：没有封号、花括号、逗号也是可以执行的。
· 封号可选
· 花括号可选
· 逗号可选
· 括号可选
· *
· margin 0
· padding 0
· 编译后的css
· * {
· margin:0;
· padding:0;
· }
变量
可以将常用的参数定义为变量，在需要的地方直接引用变量即可；
比如color、font-size、width、height等等；
可以将这些东西抽出来形成一个文件，也就是主题；
· 书写上：可以写成font-size，也可以写成@font-size;
介绍一下 Sass 和 Less 是什么？它们有何区别？
Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，语法跟css一样(但多了些功能)，比css好写，而且更容易阅读。Sass语法类似与Haml，属于缩排语法（makeup），用意就是为了快速写Html和Css。Less一种动态样式语言.将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行(借助 Node.js)。区别：(1))Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器，也可以在开发环节使用Less，然后编译成Css文件，直接放到项目中，也有Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。(2)变量符不一样，less是@，而Scss是$，而且变量的作用域也不一样，后面会讲到。(3)输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。(4)Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
是一种技术流的组织css代码的策略，它将为css提供默认的局部作用域。
来看一个CSS Modules的简单例子。
有这样的一个html元素：
<h2 id="example_title" class="title">a title for CSS Modules</h2>
按照普通css的写法，我们可以这样为它添加样式：
.title {
background-color: snow;
}
现在我们改用CSS Modules。首先，css保持不变。然后，修改html的写法。不再这样直接写html，而是改为在javascript文件里动态添加，这样做（css文件名为main.css）：
var styles =require("./main.css");
var el =document.getElementById("example_title");
el.outerHTML = '<h2 class="' + styles.title +'">a title for CSS Modules</h2>';
咦，require了一个css文件？对的，所以要用到webpack。编译后，html和css会变成这样：
CSS Modules无法改变css全局作用域的本性，它是依靠动态生成class名这一手段，来实现局部作用域的。显然，这样的class名就可以是唯一的，不管原本的css代码写得有多随便，都可以这样转换得到不冲突的css代码。
模拟的局部作用域也没有关系，它是可靠的。
网页：https://segmentfault.com/a/1190000004990977
PostCSS：
https://segmentfault.com/a/1190000011595620
它将CSS转换成抽象语法树(AST)，也就是JavaScript可以操作的一种数据形式。基于JavaScript的PostCSS插件可以执行不同的代码操作。PostCSS本身并没有改变你的CSS，它请允许插件执行和转换你的代码。实际上，对于CSS的操作，PostCSS插件并没有任何限制。只要你有想得到的，你都可以写一个PostCSS插件来实现。
PostCSS 是一个基于 Node.js 构建的第三方模块，所以它可以与现有的大量 Node.js 插件协同时运行，而且在本书中我们将会使用大量的插件来演示 PostCSS 的使用方式。下面让我们花点时间探索一下使用 PostCSS 给前端开发带来的增益效果。
PostCSS是什么？它可以理解为一种插件系统。使用它GitHub主页上的介绍：
PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
你可以在使用预处理器的情况下使用它，也可以在原生的css中使用它。它都是支持的，并且它具备着一个庞大的生态系统，例如你可能常用的Autoprefixer，就是PostCSS的一个非常受欢迎的插件，被Google, Shopify, Twitter, Bootstrap和CodePen等公司广泛使用。
深入了解：https://webdesign.tutsplus.com/series/postcss-deep-dive--cms-889
其他：https://www.w3cplus.com/preprocessor/postcss-book.html（深入PostCSS Web设计）
http://blog.csdn.net/thebeauty2016/article/details/75195537
stylish插件是我们对网站进行样式修改时常用的chrome插件。其原理就是修改网页的CSS样式，用户可以通过自己写css代码，来修改网页为自己喜欢的排版和浏览习惯，这个对于文字较多的网页尤其赞啊。当然小白不用担心，Stylish网站还提供网站CSS样式分享功能，里面已经有很多高手改好的CSS样式啦，我们可以自己选择。Stylish插件可以优化页面的样式。对于大多数普通用户来说，使用Stylish插件套用那些现成的模板，来优化那些设计不佳或风格不喜欢的网站，是个很好的解决方案。我们今天就来给大家说说Chrome Stylish插件怎么用？我们从以下几个方面来介绍：
1.stylish插件哪里下载？
1.可以打开chrome应用商店就在官网搜索stylish，在线安装。
2.不能打开chrome应用商店就在chrome插件网：http://www.cnplugins.com或者http://chromecj.com 下载CRX文件离线安装。
3.如果你不能打开chrome应该商店又执意到上去，请参照：有哪些可以访问谷歌搜索、谷歌学术网站的方法？
2.stylish插件怎么安装到chrome浏览器？
1.在线安装stylish插件的方法不用多说，直接点击添加到chrome即可：
2.stylish插件的离线安装方法参照：怎么在谷歌浏览器中安装.crx扩展名的离线chrome插件
3.使用Stylish网站提供的CSS样式的方法
1.在chrome浏览器中安装好stylish插件后，在浏览器的右上方可以看到一个S的按钮标记。当stylish插件是亮着时表示开启，灰色就表示关闭。
2.下面我们举例对某个网站例如新浪微博进行网站样式的调整。打开微博官网后点击stylish插件按钮，第一次使用时会看到可以使用的样式表为0
3.点击“为此网站查找更多样式”即会跳转到官网搜索微博相关样式
4.页面里已经有很多分享的样式了，Stylish就会为你列出该网站合适的CSS模板。我们点击进入安装页面选择某一个样式，点击下载。网站会提示是否确定添加此样式至stylish样式表，确认即可。当然你也可以不停的试试，找到自己最喜欢的样式。
如果你对自己选择的样式不喜欢的话，可以直接点击禁用就可以。
如果CSS编码在行的话，还可以自己在修改页面对CSS样式进行调整！