@extend和@mixin的区别1.@extend命令传递参数不够灵活。@extend只能传递代码片段，而@mixin可以传递参数。如果只是这点区别，可能有人会想，我一直用@mixin不就好了吗？莫凡，你看第二条。2.编译结果不同。@extend和@mixin都允许我们使用样式片段。它们之间的主要区别是使用@extend可以生成DRY(Donotrepeatyourself)风格的代码。例如：%part{position:absolute;边框半径：50%；}.box1{宽度：30px；高度：30px；背景：#ccc；@extend%part;}.box2{宽度：10px;高度：10px；背景：#000；@extend%part;}编译结果为：.box1,.box2{position:absolute;border-radius:50%;}.box1{background:#ccc;}.box2{background:#000;}我们发现样式片段没有重复。但是@mixin不能生成DRY代码。@mixin部分{位置：绝对；边框半径：50%；}.box1{背景：#ccc；@include部分；}.box2{背景：#000；@includepart;}编译结果：.box1{background:#ccc;位置：绝对；边界半径：50%；}.box2{背景：#000；位置：绝对；border-radius:50%;}SASS随机函数random()1.直接使用random()产生一个0-1的随机数，一般是4-5位小数。.box{不透明度：随机（）；}输出：.box{不透明度：0.59874；//随机生成}2.使用random()接受大于等于1的整数进行参数传递。如果小于1或不是整数，则编译出错。.box{字体粗细：随机（200）；//随机生成一个1-200之间的整数font-weight:random(2.5);//错误：预期$limit是一个整数，但`random'得到了2.5}如果你想使用带单位的随机数，你可以用+号连接它们，或者用插值#{}包裹它们，例如：.box{width:random(100)+px;height:#{random(100)}px;}但是random()不能和%符号连接。如果需要生成百分比随机数，需要使用下面的percentage()函数。SASS百分比函数percentage()percentage()函数可以将数字转换成百分比。例如：.box{width:percentage(.6)}输出结果为：.box{width:60%;}如果随机数+百分比可以这样写：.box{width:percentage(random(100)/100)}输出结果为：.box{width:60%;/*值是随机生成的*/}SASSfor循环的两种方式for循环有两种方式：@for$ifromthrough@for$ifromto$i表示变量start表示起始值end表示终值。两者的区别在于关键字through表示包含end的个数，而to不包含end的个数。例如：@for$ifrom1through3{.box:nth-child(#{$i}){width:100px;}}编译结果为：.box:nth-child(1){width:100px;}.box:nth-child(2){width:100px;}.box:nth-child(3){width:100px;}@for$i从1到3{.box:nth-child(#{$i}){宽度：100px；}}编译结果为：.box:nth-child(1){width:100px;}.box:nth-child(2){width:100px;}@for循环实例sprite图片背景为了遍历，我们经常合并将相当大的图标转换为sprite图像。一般这个sprite图片的背景定位是有规律的，比如：@for$ifrom0through2{.icon-#{$i+1}{background-position:#{$i*-30}px0;}}编译结果为：.icon-1{background-position:0px0;}.icon-2{background-position:-30px0;}。icon-3{background-position:-60px0;}SASS自定义函数@functionSass支持自定义函数，可以在任何属性值或Sass脚本中使用：例如：@functionpxToRem($px){@return($px)px/100)*1rem;}.text{font-size:pxToRem(240);}编译结果：.text{font-size:2.4rem;}
