基础篇主要介绍sass的一些基本特性，进阶篇主要写一些常用的sass控制命令、函数和规则。控制命令可能看过基础的朋友会发现@if@else@each出现在一些代码中。熟悉JS条件语句和循环的朋友就会明白这些控制命令的作用。这些控制命令是sass的重要组成部分。成分。@if,@else@if@else是一个简单的SassScript，它根据条件处理样式块。如果if的条件为真，则调用if样式块，否则调用else样式块。一个简单的代码示例@mixinGOD($SHOW:true){@if$SHOW{display:block;}@else{显示：无；}}.block{@includeGOD;}.hidden{@includeGOD(false);}上面的代码因为.block调用没有传递参数if判断为true，所以调用了if里面的代码块。.hidden调用GOD时传入参数false，false覆盖原来的默认参数，if判断为false，else代码块调用code。@forcycle举个栗子，我们可能会写一个类似bootstrap的grid网络，如果这时候col-1col-2col-3的个数比较多，可能写起来比较麻烦，所以用sass可以做到thisWrite:@for$ifrom1through5{//生成col-5.col-#{$i}{width:2rem*$i;}}@for$ifrom1to5{//生成到col-4.col-#{$i}{width:2rem*$i;}}语法规则是@forvariablefromstartto/throughend，他有to和through两种方法来描述，它们的区别是1到5只生成到.col-4和1到5生成到col-5,to将比through少一。@while循环while循环类似于JS中的循环。举个栗子，和上面的@for循环效果一样$number:5;$number-width:20px;@while$number>0{.col-#{$number}{width:$mumber-width*$数字；}$number:$number-1;}@eachloop$list:adamjohnwynnmasonkuroir;//$list是一个列表@mixinauthor-images{@each$authorin$list{.photo-#{$author}{background:url("/images/avatars/#{$author}.png")不重复；}}}.author-bio{@includeauthor-images;}sass@rules@importSass扩展CSS@import规则以包含SCSS和Sass文件。所有传入的SCSS和Sass文件都将合并并输出为单个CSS文件。此外，可以在主文件中使用导入文件中定义的变量或混音。@import"foo.css";@import"foo"screen;@import"http://foo.com/bar";@importurl(foo);@mediaSass中的@media指令与CSSSimple相同，但它还有另一个特性，可以嵌套在CSS规则中。有点像JS的冒泡特性，如果在样式中使用@media指令，就会向外冒泡。.sidebar{宽度：300px；@mediascreenand(orientation:landscape){width:500px;Sass中的@extend@extend用于扩展选择器或占位符。.error{边框：1px#f00;背景颜色：#fdd;}.error.intrusion{背景图像：url（“/image/hacked.png”）;}.seriousError{@extend.error;border-width:3px;}@at-root@at-root字面意思是跳出根元素。当你的选择器嵌套了多次，想要跳出一个选择器时，这时候可以使用@at-root。.a{颜色：红色；.b{颜色：橙色；.c{颜色：黄色；@at-root.d{颜色：绿色；}}}编译结果：.a{color:red;}。a.b{color:orange;}.a.b.c{color:yellow;}.d{color:green;}@debug,@warn,@error这三个命令在Sass中用于调试，使用后Sass源码中的这些指令，当Sass代码编译失败时，会在命令终端输出提示Bugyouset。sass的函数主要有字符串函数、数字函数、列表函数、颜色函数、自省函数、三元函数、自定义函数。下面主要介绍这几个函数的方法。字符串函数unquote()函数主要用来去掉字符串中的引号，如果字符串没有引号，则返回原字符串。quote()函数与unquote()函数正好相反，主要用于给字符串加上引号。如果字符串本身有引号，则统一用双引号""代替。To-upper-case()函数将字符串小写字母转换为大写字母。To-lower-case()函数正好与To-upper-case()相反，将字符串转为小写字母。test1{content:unquote('HelloSass!');//result->content:Hello骚！;}.test2{content:quote(HelloSass!);//result->content:"HelloSass!";}.test3{content:to-upper-case("HelloSass!");//result->内容：“你好SASS！”;}.test4{content:to-lower-case("'HelloSass!'");//result->content:"hellosass!";}Numberfunctionpercentage($value):转换没有单位的数字转换成百分比值round($value)：将值四舍五入并将其转换为最接近的整数ceil($value)：将大于自身的小数转换为下一个整数floor($value)：从其小数部分删除一个数字abs($value):返回一个数的绝对值min($numbers...):求几个值之间的最小值max($numbers...):求出多少个之间的最大值random():得到随机数.div1{width:percentage(5px/10px)//20%}.div2{width:round(5.4px)//5px}.div3{width:ceil(7.1px)//8px}.div4{width:floor(9.9px)//9px}.div5{width:abs(-10px)//10px}.div6{width:min(5px,10px)//5px}.div7{width:max(5px,10px)//10px}.div8{width:random()px//一个鬼知道的随机数}listfunctionlength($list):返回一个列表的长度值；nth($list,$n):返回列表中指定的标签signjoin($list1,$list2,[$separator]):将两列连接在一起形成一个列表append($list1,$val,[$separator]):将一个值放入列表最后zip($lists...):将几个列表组合成一个多维列表index($list,$value):返回一个值在列表中的位置值length(10px)//1length(10px20px(border1pxsolid)2em)//4length(border1pxsolid)//3nth(10px20px30px,1)//10pxnth((Helvetica,Arial,sans-serif),2)//"Arial"nth((1pxsolidred)border-topgreen,1)//(1px"solid"#ff0000)join(10px20px,30px40px)//(10px20px30px40px)join((blue,red),(#abc,#def))//(#0000ff,#ff0000,#aabbcc,#ddeeff)join((蓝红),join((#abc#def),(#dee#eff)))//(#0000ff#ff0000#aabbcc#ddeeff#ddeee#eeffff)append(10px20px,30px)//(10px20px30px)zip(1px2px3px,实心虚线点缀,绿蓝红)//((1px"实心"#008000),(2px"虚线"#0000ff),(3px"dotted"#ff0000))index(1pxsolidred,solid)//2需要注意的是join()只能将两个list连成一个list，如果直接连接两个以上的列表会报错，但是很多时候并不是只有两个列表连接成一个列表，这时候就需要多个join()函数组合在一起使用。使用zip()函数时，每个列表值必须相同。Introspection函数Introspection函数包括几个判断函数：type-of($value)：返回一个值的类型unit($number)：返回一个值的单位($number-1,$number-2):判断两个值是否可以相加、相减、合并type-of(100)//"number"type-of(100px)//"number"type-of("asdf")//"string"type-of(asdf)//"string"type-of(true)//"bool"type-of(#fff)//"color"unit(100)//""unit(100px)//"px"unit(20%)//"%"unit(10px*3em)//"em*px"unit(10px*2em/3cm/1rem)//"em/rem"unitless(100)//trueunitless(100px)//falseunitless(100em)//falseunitless(1/2+2)//trueunitless(1px/2+2)//falsecomparable(2px,1%)//falsecomparable(2px,1em)//falsecomparable(2px,1cm)//true但当加减法遇到不同单位时，unit()函数会报错，除了px和cm,mm运算，unitless()有时返回false是一个单位。Miscellaneousfunction在这里，Miscellaneous函数被称为三元条件函数，主要是因为它和JavaScript中的三元判断非常相似。他有两个值，条件为真时返回一个值，条件不为真时返回另一个值：if(true,1px,2px)//1pxif(false,1px,2px)//2pxSassMapsfunctionSassMap通常被称为数据映射，也有人称它为数组，因为它总是以key:value对的形式出现，但它更像是一个JSON数据。{"employees":[{"firstName":"John","lastName":"Doe"},{"firstName":"Anna","lastName":"Smith"},{"firstName":"Peter","lastName":"Jones"}]}要在Sass中获取变量，或者对map做更有意义的操作，就必须要用到map的功能。在Sass中，map本身有七个函数：map-get($map,$key)：根据给定的key值，返回map中的相关值。map-merge($map1,$map2)：将两张地图合并成一张新地图。map-remove($map,$key)：从地图中删除一个键并返回一个新地图。map-keys($map)：返回地图中的所有键。map-values($map)：返回地图中的所有值。map-has-key($map,$key)：根据给定的key值判断map是否有对应的值，有则返回true，否则返回false。keywords($args)：返回一个函数的参数，可以动态设置key和value。RGB颜色函数——RGB()颜色函数在Sass官方文档中，列出了一个Sass颜色函数列表。从大的角度来看，主要分为三大功能：RGB、HSL和Opacity。当然，它还包括一些其他的颜色功能，如adjust-color和change-color等。RGB颜色只是一种颜色的表达，其中R为红色表示红色，G为绿色表示绿色，B为蓝色表示蓝色。Sass中为RGB颜色提供了六个函数：rgb($red,$green,$blue)：根据红、绿、蓝三个值创建颜色；rgba($red,$green,$blue,$alpha)：根据红色、绿色、蓝色和透明度值创建颜色；red($color)：从颜色中获取红色值；green($color)：从颜色中获取绿色值；blue($color)：从颜色中获取蓝色值；mix($color-1,$color-2,[$weight]):将两种颜色混合在一起。HSL函数介绍在Sass中，提供了一系列与HSL相关的颜色函数供大家使用。常用的有饱和度、亮度、调整色相、变亮、变暗等。hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度（saturation）和明度（lightness）的值创建颜色；hsla($hue,$saturation,$lightness,$alpha)：传递Hue（色调）、饱和度（saturation）、亮度（lightness）和透明度（alpha）值来创建颜色；hue($color)：从一个颜色中获取色相（hue）值；saturation($color):从一个颜色中获取饱和度（saturation）值；lightness($color)：从一个颜色中获取亮度（lightness）值；adjust-hue($color,$degrees):通过改变颜色的色相值创建一个新的值lighten($color,$amount):通过改变颜色的亮度值，使颜色更亮并创建一个新的颜色;darken($color,$amount)：通过改变颜色的亮度值，使颜色变暗，产生新的颜色；saturate($color,$amount):改变颜色的饱和度值，让颜色更饱和，从而产生新的颜色desaturate($color,$amount):改变颜色值的饱和度，让颜色不那么饱和，从而创造出一种新的颜色；grayscale($color)：将一种颜色变成灰色，相当于desaturate($color,100%)；complement($color)：返回一个补色Color，相当于adjust-hue($color,180deg)；invert($color)：返回一个反转的颜色，红绿蓝值反转，透明度不变。hsl(200,30%,60%)//通过h200,s30%,l60%创建颜色#7aa3b8hsla(200,30%,60%,.8)//通过h200,s30%,l60%,a80%创建颜色rgba(122,163,184,0.8)hue(#7ab)//获取#7ab颜色的色相值195degsaturation(#7ab)//获取#7ab颜色的饱和度值33.33333%lightness(#7ab)//获取#7ab颜色的亮度值60%adjust-hue(#f36,150deg)//将#f36颜色的色调值改为150deg#33ff66lighten(#f36,50%)//增加#f36的亮度colorby50%#ffffffdarken(#f36,50%)//将#f36颜色的亮度降低50%#33000dsaturate(#f36,50%)//将#f36颜色的饱和度提高50%#ff3366desaturate(#f36,50%)//设置#f36颜色饱和度降低50%#cc667fgrayscale(#f36)//将#f36颜色变为灰色#999999complement(#f36)//#33ffccinvert(#f36)//#00cc99Opacity函数简介在CSS中，可以使用rgba、hsla和transform来控制颜色的透明度，也可以使用opacity来控制，但前两者只处理透明通道el控制颜色，而后者控制整个元素的透明度。Sass中也提供了一系列的透明度函数，但是这一系列的透明度函数主要是用来处理颜色透明度的：alpha($color)/opacity($color)：获取颜色透明度值；rgba($color,$alpha)：改变颜色的透明度值；opacify($color,$amount)/fade-in($color,$amount):使颜色更不透明；transparentize($color,$amount)/fade-out($color,$amount):使颜色更透明。自定义函数介绍上面的一些函数可以说是弱点或者我们平时可能不会用到，所以除了使用@mixin进行一些操作之外，自定义函数是一个不错的选择，在做的时候非常有用插件有用。$oneWidth:10px;$twoWidth:40px;@functionwidthFn($n){@return$n*$twoWidth+($n-1)*$oneWidth;}.leng{宽度：widthFn(5);}sass库事实上，市场上有一些更好的sass库。这里推荐Sandal这个基础sass库，以及sheral这个基于Sandal（基础sass库）扩展的移动端UI库。Sandal取其“檀香木”之意，为前端人员提供一些移动站点的基本重置，常用的mixin，如flex布局、等分、水平和垂直居中、常用图标等。基于它，你可以扩展更多你需要的UI组件，sheral是一个基于sandal的移动端UI库。_function.scss整合了所有基础功能，不输出任何样式，而_core.scss增加了基于功能的重置样式，ext文件夹包含四个扩展文件，可根据个人需要自由导入，参考凉鞋具体介绍和使用的文档。sandal的使用方法，有核心档和扩展档两种。核心文件包括resetstyles、@mixin、%等，方便调用；而扩展文件提供了基本的原子类、图标和网格系统。core文件提供了两个集合文件供调用，分别是_function.scss和_core.scss。两者的区别是function只提供功能，而core除了提供功能外，还会生成一个reset风格的扩展文件。扩展文件有四个，分别是_icons.scss、_helper.scss、_grid.scss、_page-slide.scss，可以根据需要调用。
