sass起源与介绍css其实并不是一种编程语言，css全称CascadingStyleSheets（层叠样式表）是一种HTML（标准通用标记语言的应用）或一种文档-风格的计算机语言，例如XML（标准通用标记语言的一个子集）。我们用它来实现表现层和结构层的分离，也就是html和styles的分离。您可以使用它来设置网页样式，但它不能像JavaScript那样声明变量、调用函数或使用条件语句。可以说JavaScript是灵活的、动态的，而css是死板的、不可变的。所以有人想给它加上编程思想，让他有遍历，有方法，甚至有继承，语法错误都能告诉你，所以有了CSS预处理，它的思想是先用一种新的专门的编程语言来设计网页样式，然后编译成css，其实最后引用的还是编译好的css。提到CSS预处理，Less可能是大多数人最先想到的。less是现在css预处理的优秀语言：上手快，简单，sass次之：相对来说更灵活，语法也更多（尤其是ifelsefor），当然很多人不会用它的原因是安装不方便（幸好有淘宝镜像），第三个是Stylus：比sass灵活强大。想想我们什么时候可以使用css预处理css预处理让我们的样式处理更加程序化，但是我们还是要考虑在什么环境下使用它，因为我们知道不管你的sass代码多酷，逻辑多细致，最后生成一个css文件。因此，我们需要根据项目的规模和开发时间团队的成本来确定。如果项目比较小，对css要求不高，开发时间紧，团队很多人不知道怎么用，用原生css可能会更好。Sass基本安装很多开发者本来想用sass的，但是因为sass是基于ruby的，墙在墙上，ruby长期装不上，所以就放弃了。这里推荐使用淘宝的镜像进行安装。编译学习推荐使用koala。koala是一款前端预处理器语言图形编译工具，支持Less、Sass、Compass和CoffeeScript，帮助Web开发者更高效地使用它们进行开发。跨平台运行，完美兼容windows、linux、mac。如果是学习，可以先用koala调试。如果在现代工程项目中使用，推荐使用webpack安装配置sass-loadersass和scss。我们先来看看区别。$color:red;//sasssyntax.boxcolor:$color;//scsssyntax.box{ color:$color;}其实sass语法就是sass的初始语法结构，通过规则tab缩进，类似于玉模板的缩进。而且这种语法规则非常严格，如果有什么不对，编译的时候就会报错。至于scss，是sass的一种新的语法格式。不要认为它是另一种预处理语言。其实是sass在发现之前的语法结构过于严谨后，重新定制的一种语法结构，和css有点区别。外观上和css基本一样，而且很松散，可以直接copy之前的css代码。我这里写成一个代码块只是为了举例，其实它们的文件名分别以.sass和.scss结尾。变量声明和调用这是sass的基本编程元素之一。在JS中，我们使用var来声明变量。当然letconst是ES6新加入的。sass中声明和调用变量的规则如下$height:15px!default;//声明默认变量$height:50px; //声明普通变量body{height:$height;}变量有默认变量和普通变量之分，默认变量只需要在值后面加上!default，比如!important。其实一般情况下，我们只需要声明普通变量即可，默认变量在开发组件时使用起来更方便。嵌套和局部变量、全局变量和JS类似，sass语法也有局部变量和全局变量。如下，最外层声明的全局变量可以在全局范围内调用，em的局部变量声明在em{}中，只能在em{}内部调用。$color:#000; //全局变量.block{color:$color;}em{$color:#fff; //局部变量a{//选择器嵌套color:$color;font:{//属性嵌套 size:12px; weight:bold; }&:hover{//伪类嵌套color:$color;}}}数据类型和JS类似，Sass也有自己的数据类型，都是数字：比如1,2,13,10px；strings：带引号或不带引号的字符串，如“foo”、“bar”、baz；颜色：例如，蓝色、#04a3f9、rgba(255,0,0,0.5)；布尔值：例如，真、假；空值：例如，null；值列表：以空格或逗号分隔，例如1.5em1em02em,Helvetica,Arial,sans-serif。混合宏编程的思想是，混合宏是一种类似于函数的存在。当然，它不是函数。简单的说，它是一个可重用的代码块，通过添加参数函数来提高灵活性。@mixinborder-radius{-webkit-border-radius:5px;border-radius:5px;}button{@includeborder-radius;}这里是混合宏的简单使用，首先使用@mixin定义一个名为border-radius的混合宏，然后使用@include在调用代码，其实这并没有体现出混合宏的特点。见下文@mixinborder-radius1($radius){-webkit-border-radius:$radius;border-radius:$radius;}@mixinborder-radius2($radius:5px){-webkit-border-radius:$radius;border-radius:$radius;}.box1{@includeborder-radius(5px);}.box2{@includeborder-radius;}.box2{@includeborder-radius(5px);}从代码中可以看到混合宏可以像函数一样传入参数，可以像ES6函数扩展一样添加参数默认值。如果调用时不传参数，那么就会使用默认值，大大增加了代码的灵活性，节省了大量的开发时间。其实mixin的灵活还不止于此，它可以传入多个参数，所以我们想到函数可以根据参数的多少执行不同的代码，是的，sass也可以。@mixinsize($width,$height){//可以这样定义两个或多个参数width:$width;height:$height;}.box-center{@includesize(100px,200px);}@mixinbox-shadow($shadows...){//参数太多可以用@iflength($shadows))>=1{-webkit-box-shadow:$shadows;盒子阴影：$shadows；}@else{$shadows:002pxrgba(#000,.25);-webkit-box-shadow:$shadow;盒子阴影：$shadow；}}.box{@includebox-shadow(001pxrgba(#000,.5),002pxrgba(#000,.2));}上面两个代码块中第一个比较简单，就是增加参数个数。在下面的代码块中，我们使用sass的ifelse方法来实现判断。如果参数的个数大于等于1，也就是传了参数，那我们就执行上面的代码。如果没有传递参数，我们执行下面的代码，设置默认的$shadows值生成代码块。但是混合宏也有缺点：就是调用混合宏生成的css代码不会被合并，这也是因为它可以传递参数来设置，所以不建议对复用性高的代码块使用混合宏。继承和占位符sass允许你使用@extend继承其他代码块，通过@extend继承的代码块在生成css时会被合并~完美解决上述问题。.btn1{border:1pxsolid#ccc;填充：6px10px；font-size:14px;}%btn2{border:1pxsolid#ccc;填充：6px10px；固体#ccc;填充：6px10px；字体大小：14px;}.btn-primary1{背景颜色：#f36;颜色：#fff；@extend.btn1;}.btn-primary2{背景色：#f36;颜色：#fff；@extend%btn2;}上面代码中，.btn1是一个预定义的类，然后我们在.btn-primary1中继承了他所有的代码块，而%btn2是标题中提到的占位符，该代码块placeholder如果不继承的话生成的css中是不会显示的，所以如果你使用sass编译css，最好使用placeholder来定义publicclasschoose。为了加深我们的理解，我们来看一下上面代码生成的css代码。.btn1,.btn-primary1{border:1pxsolid#ccc;填充：6px10px；字体大小：14px；}.btn-primary2{border:1pxsolid#ccc;填充：6px10px；}.btn-primary1{背景颜色：#f36;颜色：#fff；}.btn-primary2{背景颜色：#f36;颜色：#fff；}继承btn1的btn-primary1并与btn1合并，而我们用占位符定义的%btn2%btn3在生成的代码中是没有显示的，因为btn-primary2继承了%btn2，所以单独取出它继承的common部分，如果有多个代码块继承%btn2，它们将被合并。占位符或混合宏，主要取决于您的代码如何使用。如果只是静态的公共代码块，那么占位符会更合适，如果是可变代码，比如写一个复杂的css3动画等，或许混合宏会更合适。Interpolation#{}如果你接触过jade模板，你会很熟悉。这里的插值与其用法基本相同。让我们看一个复杂的代码块。$属性：（边距，填充）；@mixinset-value($side,$value){@each$propin$properties{#{$prop}-#{$side}:$value;}}.loginbox{@includeset-value(top,14px);}首先，我们声明一个$properties变量，它在值列表中包含两个字符串。在@mixin方法中，我们使用@each方法循环出值列表。然后使用插值法将字符串插入其中。我们来看看生成的css代码。登录框{margin-top:14px;填充顶部：14px；}这只是一个例子，一般情况下我们不会用这么复杂的方法来生成这么短的css代码。算术Sass允许我们做一些基本的算术：加法、减法、乘法和除法，但我要说的是：注意单位！注意单位！注意单位！当然，如果你异想天开em+px,px*px,px/rem..你需要知道的是sass中是允许颜色计算的，也就是说#222222*2你会得到#444444。其实颜色计算机制是分段运算，即如果22*222*222*2，则合并。字符串操作：字符串可以用+连接。需要注意的是，sass字符串有两种，带引号和不带引号。当然，相同的加法是一致的。如果将带引号的字符串附加到不带引号的字符串（即带引号的字符串在+号的左侧），结果将是带引号的字符串。类似地，如果一个不带引号的字符串附加到带引号的字符串（不带引号的字符串在+号的左边），结果将是一个不带引号的字符串，这意味着左边的人将跟随。.p:before{内容:"Foo"+Bar;font-family:sans-+"serif";}//生成的css如下p:before{content:"FooBar";字体系列：无衬线；}以上内容是sass的基础部分，进阶部分会整理一下函数和方法规则相关的东西。
