Sass和Rem散记
题记：rem是css3中新增加的一个单位值，他和em单位一样，都是一个相对单位，不同的是em是相对于元素的父元素的font-size进行计算；rem是相对于根元素html的font-size进行计算；这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能；
rem的使用
就如之前所说em是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险，而rem是相对于根元素<html>,这样就意味着我们只需要在根元素确定一个参考值，这个参考值设置为多少，完全可以根据我自己的需求来定；
即按照笔者自己的理解：rem我们只需要参照他唯一的“爸爸”-根元素html来设定参考值，而em的爸爸则有很多个，要设定时则需要了解他众多“爸爸”的情况
为什么要使用rem
像em单位一样，在Responsive设计中使用rem单位非常有用，虽然他们都是相对单位，但使用rem单位可以避开很多层级的关系；因为em是相对于他的父元素的font-size，而rem是相对于根元素的<html>。比如说和h1设置了font-size为1rem之后，只要不重置html的font-size大小，无论他的父元素设置为多大，对h1都不会有任何的影响；
什么是Sass
Sass是一个将脚本解析成CSS的脚本语言，即SassScript;
Sass包括两套语法。最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开。
而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开。通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。
Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。
SASS是对CSS3（层叠样式表）的语法的一种扩充，它可以使用巢状、混入、选择子继承等功能，可以更有效有弹性的写出Stylesheet。Sass最后还是会编译出合法的CSS让浏览可以使用。
也就是说它本身的语法并不太容易让浏览器识别（虽然它和CSS的语法非常的像，几乎一样），因为它不是标准的CSS格式，在它的语法内部可以使用动态变量等，所以它更像一种极简单的动态语言。
Sass中rem的使用
在css中，实现px和rem转换非常简单，但每次使用都需进行计算。虽然在html中设置font-size:62.5%；会给大家带来便利，但终究有些烦人，也不是长远之计；既然我们学习了Sass，就应该思考如何让Sass来帮助我们做这些计算的工作；接下来介绍如何使用Sass实现和rem之间的计算
rem在@function中的使用
Sass中也可以像使用em一样，实现px转换为rem；这个过程也同样是通过Sass的@function方法实现的；
根据rem的使用原理，可以知道px转rem需要在html根元素设置一个font-size值，因为rem是相对于根元素。在Sass中定义一个px转rem的函数，先要设置一个默认变量：
$browser-defalut-font-size:16px !default;//变量的值可以根据自己需求定义
而且需要在html根元素中显示的声明font-size:
html {
font-size:$browser-default-font-size;
}
然后通过@function来实现px转为rem计算：
@function pxTorem($px) {//$px为需要转换的字号
@return $px / $browser-default-font-size * 1rem;
}
定义好@function之后，实际使用中就简单多了：
//scss
html {
font-size : $browser-default-font-size；
}
.header {
font-size : pxTorem(12px);
}
//css
html {
font-size: 16px；}
.header {
font-size: 0.75rem;
}
补充-Less和Sass的丝丝缕缕
1）Less是一门css预处理语言，它扩展了css语言，增加了变量，Minxin，函数等特性，使css更易维护和扩展，它可以运行在Node或浏览器端。
2）Sass是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量，嵌套，混合，导入等高级功能，这些扩展令CSS更加优雅与牛逼；使用Sass以及Sass的样式库（如Compass）有助于更好的组织管理样式文件，以及更高效地开发项目；
3）相似之处：
1.混入(Mixins)--class中地class；
2.参数混入--可以传递参数地class，就像函数一样；
3.嵌套规则--Class中嵌套class，从而减少重复的代码；
4.运算——CSS中用上数学；
5.颜色功能——可以编辑颜色；
6.名字空间(namespace)——分组样式，从而可以被调用；
7.作用域——局部修改样式；
8.JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
4）区别
1.Less是基于JavaScript,是在客户端处理的；Sass是基于Ruby的，是在服务端处理的；
2.关于变量在Less和Sass中的唯一区别就是Less用@,而Sass用$.
3.输出设置，Less没有输出设置，Sass提供4种输出选项：nested,compact,compressed 和 expanded;
4.Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持；
