SCSS笔记7 - 流程语句、函数、组件、媒体查询

流程语句

循环语句

for...from...through...循环。当需要聚合伪类 :nth-* 的时候，使用 @for 循环很有用。除了这些使用场景，如果必须迭代最好还是使用下面的 @each 循环。

@for $i from 1 through 10 {
　　.border-#{$i} {
　　　　border: #{$i}px solid blue;
　　}
}

each...in...命令，作用与for类似，属于最常用的。each后面紧跟的是枚举变量，in后面紧跟的是原列表（或原map）。

@each $member in a, b, c, d {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

@each $member in $members {
　　.#{$member} {
　　　　background-image: url("/image/#{$member}.jpg");
　　}
}

while循环，简单说，当上面两种不能满足要求的时候再用它。

$i: 6;
@while $i > 0 {
　　.item-#{$i} { width: 2em * $i; }
　　$i: $i - 2;
}

条件语句

就是@if和@else了，用法同编程语言。测试一个错误值时，通常使用 not 关键字而不是比较与 false 或 null 等值。

@if not index($list, $item) {
  // …
}

轻易不要使用条件语句。

函数

Sass允许用户自定义函数：

@function double($n) {
　　@return $n * 2;
}

#sidebar {
　　width: double(5px);
}

颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。具体看http://www.w3cplus.com/preprocessor/sass-color-function.html

最好使用 mix(..) 替代 darken(..) 和 lighten(..)。通过混合白色 或 黑色实现变量或变暗的 mix
函数，是一个不错的方法。

lighten(#cc3, 10%)  // #d6d65c，减淡百分之十
darken(#cc3, 10%)  //  #a3a329，加深百分之十
grayscale(#cc3) // #808080
complement(#cc3) // #33c，这是反色

组件

具体参考：https://sass-guidelin.es/zh/#section-33

• 可以做一件事，只做一件；
• 在整个项目中可以重用，具有可复用性；
• 各自独立。

例如，搜索框就应该被视为一个组件，可以在不同位置、不同页面、多种环境下重复使用。它不应该受限于 DOM 中的位置（页脚、侧边栏、主内容区…）。

几乎所有的接口都可以被视为小组件，而且强烈建议坚持这种模式。这不仅仅会精简整个项目中 CSS 的代码量，而且也会比维护一个到处无逻辑的烂摊子容易得多。

媒体查询用法

.foo {
  color: red;

  @include respond-to('medium') {
    color: blue;
  }
}

生成

.foo {
  color: red;
}

@media (min-width: 800px) {
  .foo {
    color: blue;
  }
}