- VisualStudio2022插件的安装及使用-编程手把手系列文章
- pprof-在现网场景怎么用
- C#实现的下拉多选框,下拉多选树,多级节点
- 【学习笔记】基础数据结构:猫树
可以在github看代码,非常方便:https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss 。
就是有时候网络差.
@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
!default
$gray-100: #f8f9fa !default;
设置默认值,优先级最低;当变量已经存在时,!default对应的值被覆盖.
@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%.
// 格式
// $map: (
// key1: value1,
// key2: value2,
// key3: value3
// );
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
) !default;
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}.";
}
}
}
#{$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};
}
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 函数 的附加功能。这意味着/始终是计算中的除法运算符! 。
最后此篇关于从bootstrap源码中学习Sass(一)的文章就讲到这里了,如果你想了解更多关于从bootstrap源码中学习Sass(一)的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。
我实际上正在尝试构建一个 gulp 计划来做网络相关的事情,比如编译 sass、缩小 css、丑化 javascript 等等。但我真的在使用 sass 时遇到了麻烦。 这是我的代码示例: gulp.
为了简化样式的描述,浏览器设计了 css 作为 DSL(领域特定语言)。css 写起来简单,但在很多方面都不太方便,比如不支持嵌套,代码比较冗余;不支持继承和混合,代码不好复用等。 为了给 c
如何编译sass模块(新版sass)? https://css-tricks.com/introducing-sass-modules/ 我尝试了 sass-migrator 终端,但它没有编译 ht
在 SASS 中,当出现错误时,它会在浏览器的页面顶部显示一条消息。它的一个样本在附图中。 该文本不可选择。它不是图像。它不会出现在“查看源代码”中。它在 Firebug 中不可见。 错误文本是如何呈
我想决定何时编译.sass文件。换句话说,我不想看文件,而是手动编译。 我该怎么做? 最佳答案 它比我想象的要简单: sass style.scss style.css 关于sass - 我如何在不观
我希望有一个像 +stacktextshadow(blue, red, green) 这样的 mixin吐了text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3p
我想在我们公司的 Web 应用程序上使用 SASS,但我无法在生产机器上安装任何程序。我搜索的有关 SASS 的所有内容都需要您运行 gem 之类的安装程序,并且还需要 HAML。 我希望找到一个脚本
From the docs我看到您可以更改 SASS 的缓存位置。 但是,我不确定要使用的确切语法。我有一个 Zurb 基金会项目,随之而来的是一个 config.rb文件。我认为这是需要更新以更改缓
也许更好的问题是,有没有更有效的方法来覆盖 mixin 的一部分? 这段SCSS: @mixin button { .button { background-color: red;
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置; // vue.config.js module.exports = { css: {
我正在使用多行注释 /** 常见样式请看这里*/样式定义继续... 我在编译时遇到错误。它说: Error: Invalid CSS after "*/": expected identifier,
我正在尝试在 Nuxt.js 中使用 sass 包而不是 node-sass 。我找到了这样的配置; // vue.config.js module.exports = { css: {
重复问题? 是的。但与this有点不同 概述: 我也是括号文本编辑器的新用户。我知道 Scss 和 Sass 之间的区别。但是我使用方括号文本编辑器的原因只是为了 Sass 而不是 Scss。 看了J
我正在寻找像 +stacktextshadow(blue, red, green) 这样的 mixin text-shadow: 1px 1px 0 blue, 2px 2px 0 red, 3px
我决定删除 node-sass来自我的 gatsby 项目并使用 sass反而。我遵循了所提到的here对于 v3。我删除了 node-sass现在我的 package.json 中有这些版本: "g
我正在使用 vanilla Sass(没有 Compass/SUZY/Bourbon/etc.),但我无法确定将 *.rb 文件放在哪里。我不是 Ruby 程序员,但我确实找到了一个其他人编写的函数,
我刚开始使用gulp-sass ,是否有一种“简单”的方法来找出正在使用的 Sass 版本? 并不是说我认为这太重要了,但我正在使用 gulp-sass在 Visual Studio 2015 (CT
我正在为 sass 实现 grunt 插件到 css 处理,但有 2 个选项可用 grunt-contrib-sass 和 grunt-sass。 我在互联网上搜索但找不到任何相关答案 grunt-c
我试图在 Angular 项目中使用 CSS 变量和 Sass 函数(准确地说是 lighten()/darken()),据我所知,最新版本的 LibSass 允许这样做。 我已安装 node-sas
我是一名优秀的程序员,十分优秀!