从bootstrap源码中学习Sass（一）

原创

图难于其易

发布于 2024-03-31 16:01:18

文章被收录于专栏：读书笔记读书笔记

可以在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(?developer/article/2403520/"/icons/);`

那么，--#{$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