從bootstrap原始碼中學習Sass（一）

图难于其易發表於2024-04-01
boot原始碼

可以在github看程式碼，非常方便：https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss

就是有時候網路差。

基礎用法

scss/bootstrap.scss

1. @import、@include、@mixin

// 引入`variables.scss`
@import variables;

// 呼叫`@mixin`建立的sass程式碼塊
// 在呼叫前必須有 @mixin bsBanner($var) {}
@include bsBanner("");

mixins/_banner.scss裡的bsBanner()：

// 作用應該是在被呼叫處加入這一塊頭部註釋資訊
@mixin bsBanner($file) {
  /*!
   * Bootstrap #{$file} v5.3.3 (https://getbootstrap.com/)
   * Copyright 2011-2024 The Bootstrap Authors
   * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   */
}

那麼，這一段的年份和版本又是怎麼自動更新的呢？

在bootstrap/build/banner.mjs：

import fs from 'node:fs/promises'
import path from 'node:path'
import { fileURLToPath } from 'node:url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

const pkgJson = path.join(__dirname, '../package.json')
const pkg = JSON.parse(await fs.readFile(pkgJson, 'utf8'))

const year = new Date().getFullYear()

function getBanner(pluginFilename) {
  return `/*!
  * Bootstrap${pluginFilename ? ` ${pluginFilename}` : ''} v${pkg.version} (${pkg.homepage})
  * Copyright 2011-${year} ${pkg.author}
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
  */`
}

export default getBanner

scss/_variables.scss

1. !default

$gray-100: #f8f9fa !default;

設定預設值，優先順序最低；當變數已經存在時，!default對應的值被覆蓋。

2. @funciton、mix()、@return

// 使用函式tint-color()
$blue-100: tint-color($blue, 80%) !default;

scss/_functions.scss裡的tint-color()：

@function tint-color($color, $weight) {
    // mix()是sass的color模組的內建方法
    // mix($color1, $color2, $weight)
  @return mix(white, $color, $weight);
}

$weight為混合比例，可以是80%或者0.8，意思是$color1佔比80%，$color2佔比20%。

3. map資料型別

// 格式
// $map: (
//   key1: value1,
//   key2: value2,
//   key3: value3
// );
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
) !default;

4. length()、map-values()、nth()、@if、@warn

@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");

scss/_functions.scss裡的_assert-starts-at-zero()：

@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {

    // 此處的length()是sass的list模組的內建方法
    // 返回 $list 的長度
  @if length($map) > 0 {

      // map-values()是sass的map模組的內建方法
      // 返回 $map 中所有值的逗號分隔列表
    $values: map-values($map);

    // nth()是sass的list模組的內建方法
    // nth($list, $n)
    // 返回 $list 在 索引 $n 處的元素，從1開始計數。如果 $n 為負數，則從 $list 末尾開始計數
    $first-value: nth($values, 1);
    @if $first-value != 0 {

        // @warn發出警告、堆疊跟蹤。相比@error，它不阻止程式繼續執行
        // 避免使用者傳遞現在已棄用的舊引數，或者以不太理想的方式呼叫你的 API
      @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
    }
  }
}

5. CSS變數、#{$text}（插值）

CSS變數，也就是CSS var()：

--gray: #f7f7f7;
color: var(--gray);

插值：

$link-color: $primary !default;

$variable-prefix:  bs- !default; // Deprecated in v5.2.0 for the shorter `$prefix`
$prefix: $variable-prefix !default;

$font-family-base:  var(--#{$prefix}font-sans-serif) !default;
$btn-link-color: var(--#{$prefix}link-color) !default;
// 也可以這樣用：`background-image: url("/icons/#{$name}.svg");`

那麼，--#{$prefix}link-color在哪裡？

在scss/_root.scss：

:root,
[data-bs-theme="light"] {
  --#{$prefix}link-color: #{$link-color};
}

6. type-of()、comparable()、unquote()、if()、calc()

$card-border-radius: var(--#{$prefix}border-radius) !default; // --bs-border-radius: 0.375rem;
$card-border-width: var(--#{$prefix}border-width) !default; // --bs-border-width: 1px;

$card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;

scss/_functions.scss裡的subtract()：

@function subtract($value1, $value2, $return-calc: true) {
  @if $value1 == null and $value2 == null {
    @return null;
  }

  @if $value1 == null {
    @return -$value2;
  }

  @if $value2 == null {
    @return $value1;
  }

// comparable()返回 $number1 和 $number2 是否具有相容的單位
// 如果返回 true，$number1 和 $number2 可以安全地進行計算和比較
  @if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
    @return $value1 - $value2;
  }

    // unquote($string)刪除字串中的引號
    // 此處unquote("(")輸出結果為：(
  @if type-of($value2) != number {
    $value2: unquote("(") + $value2 + unquote(")");
  }

    // if( expression, value1, value2 )
    // expression結果為true時，返回value1，否則返回value2
  @return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
}

在Sass中，calc()與CSS calc()的語法相同，但具有使用 Sass 變數 和呼叫 Sass 函式 的附加功能。這意味著/始終是計算中的除法運算子！

參考資料：

  • sass中!default和!global的作用：https://juejin.cn/post/7045162753807515655
  • Sass map詳解 ：https://www.cnblogs.com/whqet/p/Sassmap.html
  • 插值：https://sass.nodejs.cn/documentation/interpolation/
  • mix是sass的color模組的內建方法：https://www.cnblogs.com/qjuly/p/9125219.html
  • unquote：https://sass.nodejs.cn/documentation/values/strings/
  • SASS if()簡介 ：https://juejin.cn/post/7108948522153541662
  • calc()：https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc

更多資料

  • Sass文件:
    • 中文文件，缺點是有廣告：https://sass.nodejs.cn/documentation
    • 沒有廣告，缺點是英文文件：https://sass-lang.com/documentation
  • 阮一峰——CSS 變數教程

相關文章