可以在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 函数 的附加功能。这意味着
/
始终是计算中的除法运算符！

参考资料：

更多资料

标签: none

添加新评论