『聚合』 从bootstrap源码中学习Sass(一)

可以在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. @funcitonmix()@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 变量教程


文章源地址: https://www.cnblogs.com/siluo2000/p/18108865.html 转载请注明出处

© 版权声明
WWW.ANXKJ.TOP
喜欢就支持一下吧
点赞7 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容