1.$n1: 1.2;2.$n2: 12;3.$n3: 14px;4.$n4: 1em;

1.$s1: container;2.$s2: 'container';3.$s3: "container";

1.$padding: 1px 5px 10px 15px;2..container {3. padding: nth($padding,2) nth($padding,4);4.}5.6.// out css7..container { padding: 5px 15px; }

1.$map: (color: red,background-color: #f00);2.3.body {4. color: map-get($map, color);5.}6.7.// out css8.body { color: red; }

1./*! 顏色類型*/2.$c1: blue;3.$c2: #fff;4.$c3: rgba(255,255,0,0.5);5.body {6. color: $c3;7.}8.9.// out css10.body { color: rgba(255, 255, 0, 0.5); }

1.$null: null;2.body {3. @if $null == null{4. color: red;5. }6.}7.8.// out css9.body { color: red; }

1.// scss 2.$width1: 100px;3.$width2: 125px;4.span {5. width: $width1 + $width2;6.}7.8.a:hover {9. cursor: e + -resize;10.}11.a::before {12. content: A + 'bc';13.}14.a::before {15. content: "A" + bc;16.}17.p {18. padding: 3px + 4px auto;19.}20.$version: 3;21.p::before {22. content: "hello,Sass #{$version}"; /*! 這里如果加上大括號就會

1.// 沒有參數的mixin2.@mixin test1 {3. color: red;4.}5.6.body {7. @include test1;8.}9.10.// 一個參數11.@mixin test2($color: red) {12. color: $color;13.}14.body {15. @include test2(#fff);16.}17.18.// 多個參數19.@mixin test3($color: red, $fontSize: 12px) {20. color: $color;21. font-size: $fontSize;22.}23.24.body {25. // 直接傳值, 不可以打亂順序26. // @include test(blue, 18px);27.28. // 通過鍵值對的方式,可以打亂傳值的順序29. @include test3($fontSize: 18px, $color: blue);30.}31.32.// out css33./* line 6, test1 */34.body { color: red; }35.36./* line 14, test2*/37.body { color: #fff; }38.39./* line 24, test3*/40.body { color: blue; font-size: 18px; }

1.// scss2.// 多值傳遞3.@mixin test4($shadow...) {4. text-shadow: $shadow;5. -webkit-text-shadow: $shadow;6. -moz-text-shadow: $shadow;7.}8..text {9. @include test4(1px 1px 10px red, 0 0 5px blue);10.}11.12.// out css13..text { text-shadow: 1px 1px 10px red, 0 0 5px blue; -webkit-text-shadow: 1px 1px 10px red, 0 0 5px blue; -moz-text-shadow: 1px 1px 10px red, 0 0 5px blue; }

1.// scss2.@mixin style-for-iphone {3. @media only screen and (min-width:320px) and (max-width:568px){4. @content;5. }6.}7.@include style-for-iphone {8. height: 100px;9. font-size: 12px;10.}11.12.// out css13.@media only screen and (min-width: 320px) and (max-width: 568px) { height: 100px; font-size: 12px; }

1.// scss2.@function double($width){3. @return $width * 2;4.}5.6.body {7. $color: rgba(255,0,0, .3);8. color: $color;9. width: 100%;10. height: 100%;11. p {12. // 內置函數13. color: darken($color, 0.5); // 加深14. background-color: lighten($color, 0.9);// 變淺15. z-index: str-length('aaaa'); // 字符串的長度16. z-index: str-index('aaabddd','b');// 指定字符的索引的位置17. width: double(5px);18. }19.}20.21.// out css22.body { color: rgba(255, 0, 0, 0.3); width: 100%; height: 100%; }23.body p { color: rgba(252, 0, 0, 0.3); background-color: rgba(255, 5, 5, 0.3); z-index: 4; z-index: 4; width: 10px; }

1.// scss2./*!if 的用法*/3.$width: 800;4.body {5. // 跟三目運算符類似6. color: if($width > 800, blue, red);7.}8.@if $width > 800 {9. body {10. color: red;11. }12.} 13.@else if $width == 800 {14. p {15. color: blue;16. }17.}18.@else {19. body{ 20. color: blue;21. }22.}23.24./// out css25.body { color: red; }26.p { color: blue; }

1.// scss2.@for $i from 1 through 5 {3. .span#{$i} {4. width: 20% * $i; 5. }6.}7.8.// out css9..span1 { width: 20%; }10..span2 { width: 40%; }11..span3 { width: 60%; }12..span4 { width: 80%; }13..span5 { width: 100%; }

1.// scss2.$j: 6;3.@while $j > 0 {4. .p#{$j} {5. width: 20% * $j;6. }7. $j: $j - 3;8.}9.10.// out css11..p6 { width: 120%; }12..p3 { width: 60%; }

1.// each 普通的用法2.$k: 1;3.$color: red, green, blue;4.@each $c in $color {5. .div#{$k} {6. color: $c;7. }8. $k: $k + 1;9.}10.11.// out css12.13..div1 { color: red; }14..div2 { color: green; }15..div3 { color: blue; }16.

1.@each $key, $color in (default, green), (dange,blue), (error, red) {2. .aler-#{$key} {3. color: $color;4. }5.}6.7.// out css8..aler-default { color: green; }9..aler-dange { color: blue; }10..aler-error { color: red; }

1.//scss2.@each $key, $val in (default: green, dange: blue, error: red) {3. .alert-#{key} {4. color: $val;5. }6.}7.8.// out css9..alert-key { color: green; }10..alert-key { color: blue; }11..alert-key { color: red; }12.

1.// scss2.@function buildContainer($num: 5) {3. $map: (defaultValue: 0);4. $rate: percentage(1 / $num); // percentage 求出百分比5. @for $i from 1 through 5 {6. $tempMap: (col#{$i} : $rate * $i);7. $map: map-merge($map, $tempMap);8. }9. $map: map-remove($map, defaultValue);10.11. @return $map;12.13.}14.@mixin buildContainer($num: 5) {15. $map: buildContainer($num);16. @each $key, $val in $map {17. .#{$key} {18. width: $val;19. }20. }21.}22.23.@include buildContainer();24.25.// out css26..col1 { width: 20%; }27..col2 { width: 40%; }28..col3 { width: 60%; }29..col4 { width: 80%; }30..col5 { width: 100%; }