//Sass style $color:red; p{ $color:blue; color:$color;//blue } a{ color:$color;//blue } //Less style @color:red; p{ @color:blue; color:@color;//blue } a{ color:@color;//red }

3.5 混合(mixin)

sass中使用@mixin声明混合，可以传递参数，也可以给参数设置默认值。声明的@mixin通过@include来调用；在less中只需要将定义好的class用类似函数的方式直接引用。

无参数 mixin

//sass style @mixin center-block { margin-left:auto; margin-right:auto; } .demo{ @include center-block; } //less style .center-block { margin-left:auto; margin-right:auto; } .demo{ .center-block; } //css style .demo{ margin-left:auto; margin-right:auto; }

有参数 mixin

//sass style @mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); } .opacity-80{ @include opacity(80); //传递参数 } //less style .opacity(@opacity:50) { opacity: @opacity / 100; filter: alpha(opacity=@opacity); } .opacity-80{ .opacity(80); //传递参数 } //css style .opacity-80{ opacity: .8; filter: alpha(opacity=80); }

多个参数 mixin

Sass调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入；Less中使用方法类似。

//sass style @mixin horizontal-line($border:1px dashed #ccc, $padding:10px){ border-bottom:$border; padding-top:$padding; padding-bottom:$padding; } .imgtext-h li{ @include horizontal-line(1px solid #ccc); } //less style .horizontal-line(@border:1px dashed #ccc, @padding:10px){ border-bottom:@border; padding-top:@padding; padding-bottom:@padding; } .imgtext-h li{ .horizontal-line(1px solid #ccc); } //css style .imgtext-h li { border-bottom: 1px solid #cccccc; padding-top: 10px; padding-bottom: 10px; }

多组值参数 mixin

Sass中如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables…；Less表示不定参数时可以直接使用 … 表示，并用@arguments表示所有参数

//sass style //box-shadow可以有多组值，所以在变量参数后面添加... @mixin box-shadow($shadow...) { -webkit-box-shadow:$shadow; box-shadow:$shadow; } .box{ border:1px solid #ccc; @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)); } //less style .box-shadow(...) { -webkit-box-shadow:@arguments; box-shadow:@arguments; } .box{ border:1px solid #ccc; .box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3)); } //css style .box{ border:1px solid #ccc; -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3); }

3.6 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量、字符串等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

//计算数值、变量 $baseFontSize: 14px !default; $baseLineHeight: 2 !default; $baseGap: $baseFontSize * $baseLineHeight !default; // => 28px $halfBaseGap: $baseGap / 4 !default; // => 7px $samllFontSize: $baseFontSize - 2px !default; // => 12px $_columns: 12 !default; $_column-width: 60px !default; $_gutter: 20px !default; $_gridsystem-width: $_columns * ($_column-width + $_gutter); // => 960px //计算颜色 p { color: #010203 + #040506; // => #050709 } //计算字符串 p:before { content: "Foo " + Bar; // => "Foo Bar" font-family: sans- + "serif"; // => sans-serif }

3.7 控制指令

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用。

@if

//sass style p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } @if null { border: 3px double; } } //css style p { border: 1px solid; } //sass style $type: monster; p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //less style @type: monster; p (@type) when (@type = ocean){color: blue;} p (@type) when (@type = matador){color: red;} p (@type) when (@type = monster){color: green;} p (@type) when (@type = dark){color: black;} //css style p { color: green; }

@for

@for 指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

//sass style @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } //css style .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

@each

语法为：@each $var in <list or map>。其中$var表示变量，而list和map表示list类型数据和map类型数据。

单个字段list数据循环：