可以在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 变量教程