[Day19] SCSS 学习笔记

写 CSS 的时候常常会有些设定是重复出现的，SASS(SCSS)是一个方便的预处理器，提供了变数、函式、继承...等方法，省去这些重复撰写的时间，虽然 CSS 已经有原生变数的功能，但是 SASS(SCSS) 提供的函式方法、逻辑判断都还是无法取代的。

SCSS 和 SASS 的差异

SASS：去除大括号和分号，靠缩排 (Tab) 及换行来区隔，跟 CSS 写法差距较大。

.box
    width: 50%
    margin: 0 auto
    p
        margin: 10px
    a
        text-decoration: none

SCSS：提供巢状写法，其他部分和 CSS 一样，可以延续写 CSS 的模式，需要时再加入 SCSS 的用法。

.box {
    width: 50%;
    margin: 0 auto;
    p {
        margin: 10px;
    }
    a {
        text-decoration: none;
    }
}

SCSS 的功能

快速辨识 SCSS 应用时机：

变数的前面用 $ 表示。
方法的前面用 @ 表示。

Variables（变数）

字型、色彩这类主题性的样式会重复使用，如果整个风格需要修改时很容易改错或是遗漏，把这些样式存到变数中，之後只要变更变数的值，就能让所有套用的样式一次全部改完。

// 宣告
$primaryColor: #aabb00;

.text {
  // 引用
  color: $primaryColor;
}

Nesting（巢状套用）

撰写某区块的特定样式时，不需要重复一直打父层名称，只要像 HTML 一样巢状架构撰写就好。（巢状不宜太多层，才能提高效能和管理）

.box{
    width: 50%;
    p{
        margin: 10px;
        a{
            text-decoration: none;
        }
    }
}

Mixin（混合）

变数只能存放单一的设定值（例如：颜色、大小），mixin 则是一整段的样式可以重复使用，就不需要特地找到这段样式复制贴上。

// 宣告
@mixin circle {
    height: 50px;
    width: 50px;
    background-color: pink;
    border-radius: 50%;
}

// 引用
.btn-candy {
    @include circle;
}

Mixin + 变数

可以用带入参数的方式套用样式，就能在同样的架构下做出变化。

$primaryColor: #336699;

// 变数可以使用 : 给予预设值
@mixin circle($size, $color: pink) {
    height: $size;
    width: $size;
    background-color: $color;
    border-radius: 50%;
}

// 引用 @include (名称)
.btn-candy {
    @include circle(60px, $primaryColor);
}

Mixin + 判断式

可以用@if、@else if、@else来做出变化。

@mixin marginXorY($size, $direction) {
  @if $direction == vertical {
    margin-top: $size;
    margin-bottom: $size;
  } @else if $direction == horizontal {
    margin-left: $size;
    margin-right: $size;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.box {
  @include marginXorY(5px, horizontal);
}

Extend（继承）

继承（extend）和混合（mixin）功能相似，也是能快速加入一段写好的样式，使用差异在下一段说明。

// 宣告
%hide {
    display: none;
}

.secret {
  // 引用
  @extend %hide;
  color: #fff;
}

Extend 和 Mixin 的差异

extend：编译成 css後不会完整复制所有样式，而是加到同一个类别去，这样会减少重复样式的产生，适合用在重复使用的固定样式，例如：使用 float 排版时需要加上 clearFix 来避免破版，就可以用继承。

// 编译前
%hide {
    display: none;
}

.a {
    @extend %hide;
    color: #fff;
}

.b {
    @extend %hide;
    color: #eee;
}

//编译後
.a, .b {
    display: none;
}
.a {
    color: #fff;
}
.b {
    color: #eee;
}

Mixin：编译後会把样式复制到引用的类别去，所以用的越多，重复程序码越多，因为可以搭配变数和判断式使用，适合重复使用又可以做变化调整的样式。

// 编译前
@mixin hide {
    display: none;
}

.a {
    @include hide;
    color: #fff;
}

.b {
    @include hide;
    color: #eee;
}

//编译後
.a {
    display: none;
    color: #fff;
}
.b {
    display: none;
    color: #eee;
}

Function（函式）

跟 JavaScript 的函式没什麽差别，可以搭配@if、@else、@for、@while...等逻辑判断做出各种功能。

// 宣告
@function pow($num, $time) {
  $result: 1;
  @for $_ from 1 through $time {
    $result: $result * $num;
  }
  @return $result;
}

.box {
  // 引用
  margin-left: pow(2, 4) * 1px;
}

Import（引入）/ Use（引用）

import 在 JavaScript 中是常用的功能，SCSS 也提供这个方法，但是因为存在一些问题，将逐渐弃用，改为使用 use。

// 引用外部档案 file/_forceReset.scss
@use 'file/forceReset';

Maps

有连续性关连的属性值可以放在同一个变数中，就像 JavaScript 的物件阵列一样，需要的时候从这个变数中取出指定的数值即可。

// 引用 sass 的方法
@use "sass:map";
// 宣告
$font-weights: ("regular": 400, "medium": 500, "bold": 700);

// 扩充
$font-weights: map.set($font-weights, "extra-bold", 900);

// 合并
$light-weights: ("lightest": 100, "light": 300);
$font-weights: map.merge($font-weights, $light-weights);

.title {
  // 取值
  font-weight: map.get($font-weights, "medium");
}

// 遍历
@each $name, $value in $font-weights {
  .fw-#{$name} {
    font-weight: $value;
  }
}

<<: Day 12：UI / UX

>>: Python 练习