SASS 学习笔记 II

SASS 学习笔记 II

上篇笔记，SASS 学习笔记 中包含：

• 配置

• 变量

• 嵌套

  这里加一个扩展，嵌套中有一个 & 的用法，使用 & 可以指代当前 block 中的 selector，后面可以追加其他的选择器。如当前的 scope 是 form，可以在嵌套中使用 &-selector 指代 form-selector，如：

  HTML 有：

  
  <nav class="navbar">
    <div class="navbar-navigation">
      <div class="navbar-navigation-left">div>
      <div class="navbar-navigation-right">div>
    div>
  nav>
  
  

  scss 写：

  .navbar {
    &-navigation {
      &-left {
      }
  
      &-right {
      }
    }
  }
  

• 扩展

• mixin

• function

• placeholder selector

• import & partials

这部分就这剩下的一些特性/功能去学习一下，过了一遍剩下的内容，SCSS 也差不多学完了。

SCSS 高级特性

数据类型

• 数字

  这个基本是数字单位，如 100px，100%，100，0.1 等

• 字符串

  这个常用于字体类和 string interpolation，如 font-family: 'Arial'，string interpolation 下面会说

• 颜色

  hex、hsl、rgb 这种

• 布尔值

• list

  SCSS 中的 list 一般用逗号做分隔符，不过有些和 css 一致的可以用空格，如：

  // 不用字符串 sass 会提示报错，node-sass好像没什么问题就是了
  $colors: 'red', 'orange';
  $box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  

• map

  用法如下：

  $colors: (
    primary: red,
    secondary: green,
    tertiary: blue,
  );
  
  // 获取方式使用内置的 map-get
  html {
    background-color: map-get($colors, primary);
  }
  

  我个人觉得 map 获取单一值的意义不大，不过搭配上变量+循环/if 进行配置之类的倒是很方便。

• null

  一般不存在的值 SCSS 默认就是 null，出现获取/使用 null 的时候，终端也会报错。

• 特殊

  global, selector 和 function

interpolation

interpolation 就是一个将变量、表达式或选择器转换成一个字符串的方式，语法就是使用 #{}，使用方法有：

$color: red;

body {
  color: #{$color};
}

$selector: '.button';
#{$selector}: {
  background-color: #{$color};
}

同样，这种搭配循环/if 很好用。

for 循环

语法为：@for $i from through {} 或 @for $i from to {}，前者包含 end，后者不包。

同样搭配上面介绍过的一些特性会比较好用，如：

$colors2: (
  1: red,
  2: green,
  3: blue,
  4: orange,
);

// @for $i from 1 to 4, 4 is exclude
@for $i from 1 through 4 {
  .paragraph-#{$i} {
    background-color: map-get($map: $colors2, $key: $i);
  }
}

编译后的结果为：

.paragraph-1 {
  background-color: red;
}

.paragraph-2 {
  background-color: green;
}

.paragraph-3 {
  background-color: blue;
}

.paragraph-4 {
  background-color: orange;
}

each 循环

有点像 JS 的 for each，如果只是想获取 list 中的值，用 @each 会方便一些，也可以不需要用 map-get。

如上面的循环用 each 的写法为：

@each $i, $c in $colors2 {
  .paragraph-#{$i} {
    background-color: #{$c};
  }
}

这里不使用解构的方法也可以用 nth() 实现，如：

@each $item in $colors2 {
  .paragraph-#{nth($item, 1)} {
    background-color: #{nth($item, 2)};
  }
}

就是没这么方便。

if

也是 if/else-if/else 的用法，我觉得这种用在 media query 特别的方便。

案例

slideshow

这个主要还是用 animation 来实现的，不过使用 SCSS 的循环确实很方便，原生 CSS 定义 delay 的写法为：

.slideshow-slide:nth-child(1) {
  animation-delay: 0s;
}
.slideshow-slide:nth-child(2) {
  animation-delay: 4s;
}
.slideshow-slide:nth-child(3) {
  animation-delay: 8s;
}
.slideshow-slide:nth-child(4) {
  animation-delay: 12s;
}
.slideshow-slide:nth-child(5) {
  animation-delay: 16s;
}

使用 SCSS 的写法：

$animList: 1 0s, 2 4s, 3 8s, 4 12s, 5 16s;

@each $item in $animList {
  .slideshow-slide:nth-child(#{nth($item, 1)}) {
    animation-delay: nth($item, 2);
  }
}

或者

$animList: 1, 2, 3, 4, 5;

@each $item in $animList {
  .slideshow-slide:nth-child(#{$item}) {
    animation-delay: #{($item - 1) * 4}s;
  }
}

同样的写法也可以搭配 nth-child：

$socialMediaColors: 1 #3b5998, 2 #b31217, 3 #dc4e41, 4 #55acee, 5 #517fa4, 6
    #0077b5;

@each $color in $socialMediaColors {
  .social-icons-item:nth-child(#{nth($color, 1)}) .social-icons-link {
    color: nth($color, 2);
    border: 0.1rem solid nth($color, 2);
  }
}

最终完成的效果：

media query

media query 主要依赖 mixin，用法如下：

@mixin response($breakpoint) {
  @if ($breakpoint == xl) {
    @media (max-width: 1200px) {
      @content;
    }
  } @else if ($breakpoint == lg) {
    @media (max-width: 1000px) {
      @content;
    }
  } @else if ($breakpoint == md) {
    @media (max-width: 760px) {
      @content;
    }
  } @else if ($breakpoint == sm) {
    @media (max-width: 560px) {
      @content;
    }
  }
}

html {
  font-size: 62.5%;

  @include response(md) {
    font-size: 56.25%;
  }

  @include response(sm) {
    font-size: 50%;
  }
}