Scss - 小知识与进阶功能 ( 下 )

接续上篇继续介绍剩下的功能，这边就比较偏程式面，设计函式会比较常使用到，GO!GO!GO!

迴圈部分

迴圈可使用 @each 与 @for 来产生重複的样式，使用方法如下

@each ... in ...

类似 javascript 里面的 forEach 方法，对阵列内所有内容进行迴圈

编译前

$themes: ('primary': blue, 'danger': red);@each $name, $color in $themes {  .btn-#{$name} {    color: $color;  }}

编译后

.btn-primary {  color: blue;}.btn-danger {  color: red;}

@for

类似 javascript 里面的 for 迴圈，对阵列内指定内容进行迴圈，有 to 与 through 两种用法，其中差别在 to 不包括最后的数字，through 则相反

编译前

@for $i from 1 through 3 {  .h#{$i} {    font-size: 16px * (3 / $i);  }}

编译后

.h1 {  font-size: 48px;}.h2 {  font-size: 24px;}/* 若使用 to 则 .h3 不会被编译出来 */.h3 {  font-size: 16px;}

判断式

基本上 @if、@else、@else if 返回一段样式，而 @while 与 if() 返回一个值，皆可搭配迴圈做使用

@if、@else、@else if

使用上与 javascript 的 if ... else 相同，但要特别注意 空字串、空阵列与 0 都是 true

编译前

@mixin triangle($size, $color, $direction) {  height: 0;  width: 0;  border-color: transparent;  border-style: solid;  border-width: $size / 2;  @if $direction == up {    border-bottom-color: $color;  } @else if $direction == right {    border-left-color: $color;  } @else if $direction == down {    border-top-color: $color;  } @else if $direction == left {    border-right-color: $color;  } @else {    @error "Unknown direction #{$direction}.";  }}.next {  @include triangle(5px, black, right);}

编译后

.next {  height: 0;  width: 0;  border-color: transparent;  border-style: solid;  border-width: 2.5px;  border-left-color: black;}

@while

类似 javascript 里面的 while 判断，必须 @return 一个值

编译前

@function size($lv: 0) {  $minSize: 26px;  $value: 16px * (3 / $lv);  @while $lv>1 {    @return $minSize;  }  @while $lv<=1 {    @return $value;  }}@for $i from 1 through 3 {  .h#{$i} {    font-size: size($i);  }}

编译后

.h1 {  font-size: 48px;}.h2 {  font-size: 26px;}.h3 {  font-size: 26px;}

if()、and、or、not

接下来是有关布林值的判断式，这边的 if() 与上面不同，但也相当好用

if($condition, $if-true, $if-false) : 共有三个参数，分别为判断式、true值 与 false值and: 同 javascript 中的 &&，两边都须为 trueor: 同 javascript 中的 ||，仅有一边须为 truenot: 同 javascript 中的 !，返回相反值

@debug if(true, 10px, 15px); // 10px@debug if(false, 10px, 15px); // 15px@debug true and false; // false@debug true or false; // true@debug not true; // false

其他部分

最后是 SCSS 中比较特别的两个功能，@content 与 @at-root

@content

@mixin 结合 @if、@else、@else if 判断条件，再使用 @content 汇入内容，此方式在写 RWD 的时候很好用，可以依序判断参数，再做出对应的 CSS

编译前

@mixin media($screen) {  @if $screen == desktops {    @media (min-width: 1200px) {      @content;    }  } @else if $screen == tablets {    @media (min-width: 768px) {      @content;    }  } @else if $screen == phones {    @content;  }}html {  @include media(desktops) {    font-size: 20px;  }  @include media(tablets) {    font-size: 18px;  }  @include media(phones) {    font-size: 16px;  }}

编译后

html {  font-size: 16px;}@media (min-width: 1200px) {  html {    font-size: 20px;  }}@media (min-width: 768px) {  html {    font-size: 18px;  }}

@at-root

在巢状内写入后，会于最外层编译，若有 @media 或 @supports 则编译于其内侧

编译前

@media print {  .list {    margin: 10px;    @at-root {      .item {        color: blue;      }    }  }}.list {  margin: 10px;  @at-root {    .item {      color: blue;    }  }}

编译后

@media print {  .list {    margin: 10px;  }  .item {    color: blue;  }}.list {  margin: 10px;}.item {  color: blue;}

@at-root 可在后方加入参数，with 与 without 分别表示包括与不包括，另外还有如下两个参数

all: 所有的规则与样式rule: 只包含样式，不包括 @media 与 @supports 等规则

编译前

@media print {  @at-root (without: all) {    .a {      color: blue;    }  }  @at-root (with: rule) {    .b {      color: blue;    }  }  @at-root (with: media) {    .c {      color: blue;    }  }}

编译后

.a {  color: blue;}.b {  color: blue;}@media print {  .c {    color: blue;  }}

介绍到这边几乎所有功能都介绍完哩，再来就是思考如何应用在实战上啰~