scss学习总结

摘录更改至

scss: map:merge 和 @each $attribute, $value in $variables

研究 Element-plus 源码时,有以下一段代码:

// path: element-plus/packages/theme-chalk/src/button.scss
@include b(button) {@include set-component-css-var('button', $button);
}

有关 b 的理解,以及 @include 的作用

set-component-css-var


// path: element-plus/packages/theme-chalk/src/mixins/_var.scss
@mixin set-component-css-var($name, $variables) { @each $attribute, $value in $variables {  @if $attribute == 'default' {    #{getCssVarName($name)}: #{$value};   } @else {  #{getCssVarName($name, $attribute)}: #{$value};    }  }}

这段代码定义了一个 Sass 混合名为 set-component-css-var,它有两个参数:$name$variables$name 参数是组件的名称,$variables 参数是一个 CSS 变量名到值的映射。

混合名会遍历 $variables 映射中的每个键值对。如果键等于 "default",那么混合名会将组件的默认 CSS 变量设置为值。否则,混合名会将组件的特定属性的 CSS 变量设置为值。

getCssVarName 函数用于生成 CSS 变量名。函数有两个参数:组件名称和可选的属性名称。如果未提供属性名称,则函数会返回组件的默认 CSS 变量名(例如,--button)。否则,函数会返回包含组件名称和属性名称的 CSS 变量名(例如,--button-color)。

以下是一个使用 set-component-css-var 混合名的示例:

@mixin set-component-css-var($name, $variables) {@each $attribute, $value in $variables {@if $attribute == 'default' {#{getCssVarName($name)}: #{$value};} @else {#{getCssVarName($name, $attribute)}: #{$value};}}
}$button-variables = ("default": "#fff","color": "#000","border-color": "#ddd",
);@include set-component-css-var("button", $button-variables);

上边代码生成什么了?

--button: #fff;
--button-color: #000;
--button-border-color: #ddd;

这段代码的用途是将 CSS 变量与组件关联起来。例如,我们可以使用这段代码为按钮组件设置默认颜色、文字颜色和边框颜色。

具体来说,这段代码的执行步骤如下:

  1. 混合名会遍历 $variables 映射中的每个键值对。
  2. 如果键等于 "default",那么混合名会将组件的默认 CSS 变量设置为值。
  3. 否则,混合名会将组件的特定属性的 CSS 变量设置为值。

在示例代码中,$button-variables 映射包含三个键值对:

  • "default" 的值为 #fff,表示按钮组件的默认颜色。
  • "color" 的值为 #000,表示按钮组件的文字颜色。
  • "border-color" 的值为 #ddd,表示按钮组件的边框颜色。

因此,这段代码会将以下 CSS 变量设置为相应的值:

  • --button 的值为 #fff
  • --button-color 的值为 #000
  • --button-border-color 的值为 #ddd

sass 中 map 的用法

scss: map:merge 和 @each $attribute, $value in v a r i a b l e s 上边的仅仅是一个简单的示例。看源码过程中,我们可以找到 ‘ variables 上边的仅仅是一个简单的示例。看源码过程中,我们可以找到 ` variables上边的仅仅是一个简单的示例。看源码过程中,我们可以找到button` 的定义:

// path: element-plus/packages/theme-chalk/src/common/var.scss
$button: () !default;
$button: map.merge(('font-weight': getCssVar('font-weight-primary'),'border-color': getCssVar('border-color'),'bg-color': getCssVar('fill-color', 'blank'),'text-color': getCssVar('text-color', 'regular'),'disabled-text-color': getCssVar('disabled-text-color'),'disabled-bg-color': getCssVar('fill-color', 'blank'),'disabled-border-color': getCssVar('border-color-light'),'divide-border-color': rgba($color-white, 0.5),'hover-text-color': getCssVar('color-primary'),'hover-bg-color': getCssVar('color-primary', 'light-9'),'hover-border-color': getCssVar('color-primary-light-7'),'active-text-color': getCssVar('button-hover-text-color'),'active-border-color': getCssVar('color-primary'),'active-bg-color': getCssVar('button', 'hover-bg-color'),'outline-color': getCssVar('color-primary', 'light-5'),'hover-link-text-color': getCssVar('color-info'),'active-color': getCssVar('text-color', 'primary'),),$button
);

注意:要用 map 功能,你需要导入这个功能。以上代码片段第一行就是导入 map 函数

1. 定义变量:

  • 代码首先定义了一个名为 $button 的变量,并将其默认值设置为空映射(() !default;)。这意味着如果 $button 变量此前没有被定义,它将会被初始化为一个空映射。

2. 合并映射:

  • 代码接着使用了 Sass 内置的

    map.merge
    

    函数来合并两个映射:

    • 第一个映射包含了一系列按钮样式属性的键值对,例如:
      • font-weight: 字体粗细
      • border-color: 边框颜色
      • bg-color: 背景颜色
      • text-color: 文字颜色
      • disabled-text-color: 禁用状态下的文字颜色
      • hover-text-color: 鼠标悬停状态下的文字颜色
      • active-text-color: 鼠标按下状态下的文字颜色
      • … 等等
    • 这些键值对中的值都是通过 getCssVar 函数获取的 CSS 变量,这意味着这些样式属性的值可以被集中控制和调整。
    • 第二个映射是 $button 变量本身。如果 $button 变量已经被定义并包含了一些样式属性,那么这些属性将会被保留并与第一个映射中的属性进行合并。

3. 最终结果:

  • 经过 map.merge 函数的处理,$button 变量将会包含一个完整的按钮样式属性映射,其中的值都是 CSS 变量。
  • 这意味着我们可以通过修改 CSS 变量的值来轻松调整按钮的整体样式,而无需逐一修改每个样式属性。

总结:

  • 这段代码的目的在于使用 CSS 变量来定义按钮的样式,使样式管理更加灵活和统一。
  • 通过使用 map.merge 函数,代码可以将默认的按钮样式属性与自定义的属性进行合并,保留了灵活性和可扩展性。

getCssVar 和 getCssVarName

在以上代码中用到了 getCssVargetCssVarName 这两个函数,我统一解释一下,因为这两个函数都调用了 joinVarName

// path: element-plus/packages/theme-chalk/src/mixins/function.scss
@function joinVarName($list) {$name: '--' + config.$namespace;@each $item in $list {@if $item != '' {$name: $name + '-' + $item;}}@return $name;
}// getCssVarName('button', 'text-color') => '--el-button-text-color'
@function getCssVarName($args...) {@return joinVarName($args);
}// getCssVar('button', 'text-color') => var(--el-button-text-color)
@function getCssVar($args...) {@return var(#{joinVarName($args)});
}

#{}插值,可以通过 #{} 插值语法在选择器和属性名中使用 SassScript 变量

解释一下这段代码的作用:

1. joinVarName 函数:

  • 这个函数的作用是将一个列表($list)中的所有元素连接起来,并在开头加上一个前缀(-- 加上 config.$namespace),形成一个完整的 CSS 变量名。
  • 它会遍历 $list 中的每个元素,如果元素不为空,则将其添加到 $name 变量中,并在每个元素之间加上一个连字符(-)。
  • 最后,函数会返回生成的 CSS 变量名。

2. getCssVarName 函数:

  • 这个函数是 joinVarName 函数的一个简便调用方式。它可以接受任意数量的参数($args...),并将这些参数作为列表传递给 joinVarName 函数。
  • 它会返回 joinVarName 函数生成的 CSS 变量名。

举例说明:

  • 调用 getCssVarName('button', 'text-color') 会返回 --el-button-text-color(假设 config.$namespace 的值为 el)。
  • 调用 getCssVarName('primary-color') 会返回 --el-primary-color

代码的作用:

  • 这段代码是为了方便地生成 CSS 变量名,并在生成的变量名中加入命名空间(config.$namespace)以避免变量名冲突。
  • 这在大型项目中,尤其是使用了 CSS 预处理器的项目中,是非常有用的,可以帮助我们更好地管理 CSS 变量。

关于 getCssVar 解释两个点:$args… 和 var

在 Sass 中,$args... 表示一个可变参数列表。这意味着 args 变量可以接受任意数量的参数,这些参数可以是任意类型的值。

getCssVar 函数中,$args... 用于接收 CSS 变量名的参数列表。例如,调用 getCssVar('primary-color') 函数时,$args... 将包含一个元素,该元素的值为 'primary-color'

$args... 的使用可以使函数更加灵活,可以接受任意数量的参数。

以下是一些使用 $args... 的例子:

@function add($x, $y...) {$total: $x;@each $arg in $y {$total: $total + $arg;}@return $total;
}// 将两个数相加
$sum: add(1, 2, 3);// 将三个字符串连接起来
$string: add('a', 'b', 'c');

在第一个示例中,add() 函数用于将两个或多个数相加。$args... 用于接收任意数量的数字参数。

在第二个示例中,add() 函数用于将三个字符串连接起来。$args... 用于接收任意数量的字符串参数。

为什么这里要解释一下 var ?

var 函数容易有歧义,因为在 css 中和 sass 中都有这个函数,他们的功能也是不一样的,因此在这做一个区分:简单来说,sass 中的 var 函数用来定义变量,CSS 中的 var 用来引用变量。

CSS 中的 var

在 CSS 中,var() 函数是 CSS custom properties 的语法,用于引用 CSS custom properties。

CSS custom properties 是 CSS 中的一个新特性,允许我们在 CSS 中定义自定义变量。

CSS custom properties 的语法如下:

--[variable-name]: [value];

例如,以下 CSS 代码定义了一个名为 --color 的 CSS custom property,并将其值设置为 #fff

--color: #fff;

我们可以使用 var() 函数引用 CSS custom properties。例如,以下 CSS 代码将 .my-element 元素的颜色设置为 --color 变量的值:

.my-element {color: var(--color);
}

在 Sass 中,var() 函数用于定义 CSS custom properties。因此,Sass 中的 var() 函数与 CSS 中的 var() 函数是相同的。

sass 中的 var

在 Sass 中,var() 函数用于定义 CSS 变量。

var() 函数的语法如下:

var($name, $value);

$name 是变量的名称,$value 是变量的值。

var() 函数会将 $name 变量定义为一个 CSS 变量,并将 $value 赋值给该变量。

以下是使用 var() 函数的例子:

$color: var(--color);

这段代码会定义一个名为 $color 的 CSS 变量,并将其值设置为 var(--color)

$color 变量可以被用于 CSS 中,例如:

.my-element {color: $color;
}

这段 CSS 将会将 .my-element 元素的颜色设置为 var(--color) 变量的值。

var() 函数还可以用于定义具有默认值的 CSS 变量。例如:

$color: var(--color, #fff);

这段代码会定义一个名为 $color 的 CSS 变量,并将其值设置为 #fff。如果 var(--color) 变量未定义,则将使用 #fff 作为其值。

var() 函数是 Sass 中定义 CSS 变量的重要工具。它可以帮助我们在 CSS 中实现灵活和可重用的样式。

@mixin与@include %与@extend @function

@mixin  使用@include引用,可传参,返回一段css样式,不用会生成一个class,生成结果是直接拷贝,这样多处引用,会造成代码重复%       使用@extend引用,不可传参,返回一段css样式。%开头的class只是用来extend,不会生成在代码里。生成后,多个class用逗号连接,提取成一个样式,减少重复代码.@function与@mixin的最大不同,返回的是一个值,不是一段css样式

@forward与@use

@forward:
概念:@forward用于将模块的部分或全部内容重新导出,使其他模块可以通过@use导入该模块的内容。@use:
概念:@use用于导入其他Scss或Sass模块,并创建一个命名空间来管理导入的模块中的变量、混合器、函数和样式规则。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/866485.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RISC-V的历史与设计理念

指令集是什么? 如果把软件比作螺丝钉,硬件比作螺母,那么指令集架构就是螺丝钉与螺母的蓝图。我们需要根据蓝图设计可以匹配的螺丝钉与螺母。——包云岗老师 RISC-V的起源 以往比较流行的指令集:ARM,MIPS,X…

FreeRTOS的任务间通信

文章目录 4 FreeRTOS任务间通信4.1 队列4.1.1 队列的使用4.1.2 队列的创建,删除,复位4.1.3 队列的发送,接收,查询 4.2 邮箱(mailbox)4.2.1 任务中读写邮箱4.2.2 中断中读写邮箱 4.3 队列集4.3.1 队列集的创…

【哈希表】【字符串】个人练习-Leetcode-1814. Count Nice Pairs in an Array

题目链接&#xff1a;https://leetcode.cn/problems/count-nice-pairs-in-an-array/description/ 题目大意&#xff1a;给出一个数列nums[]&#xff0c;求nice对 ( i , j ) (i, j) (i,j)对数。nice对满足0 < i < j < nums.length和nums[i] rev(nums[j]) nums[j] r…

Vue打包文件dist放在SpringBoot项目下运行(正确实现全过程)

项目开发中&#xff0c;一般我们都会使用SpringBootVue进行前后端开发。 在部署时&#xff0c;会后端启动一个服务&#xff0c;再启动一个nginx&#xff0c;nginx中配置前端打包文件dist进行项目访问。 实际上&#xff0c;我们也可以把打包好的dist目录放在SpringBoot项目下进…

【Android面试八股文】Android 有哪些存储数据的方式?

在Android平台上,有多种方式可以存储数据,每种方式都适合不同类型的数据和使用场景。以下是主要的存储数据方式: SharedPreferences(轻量级数据存储): SharedPreferences是用于存储简单键值对数据的最简单方法,适合存储用户偏好设置、配置信息等。数据以XML文件形式存储…

Os-hackNos

下载地址 https://download.vulnhub.com/hacknos/Os-hackNos-1.ova 环境配置如果出现&#xff0c;扫描不到IP的情况&#xff0c;可以尝试vulnhub靶机检测不到IP地址解决办法_vulnhub靶机扫描不到ip-CSDN博客 信息收集 确定靶机地址&#xff1a; 探测到存活主机192.168.111.…

如何利用AI撰写短文案获客?分享6大平台和3大步骤!

从去年开始&#xff0c;很多大厂都在裁员&#xff0c;原因就是因为AI的火爆&#xff0c;替代了很多机械式的劳动力。以前很多人可以通过机械式的工作来摸鱼&#xff0c;现在AI完成的效率比人工的要高很多倍。 国内好用的AI平台非常多&#xff0c;有时候也可以使用几个AI平台结合…

专业的酱酒鉴评方法及要求

在探讨酱酒鉴评的领域&#xff0c;我们不仅需要关注鉴评的基本方法&#xff0c;还要深入了解品评环境的设置、品酒杯的选择以及品酒员的专业素质。这些因素共同构成了酱酒鉴评的完整体系&#xff0c;确保了鉴评结果的科学性和准确性。 酱酒鉴评的基本方法 酱酒鉴评主要依赖于…

软件设计之Java入门视频(11)

软件设计之Java入门视频(11) 视频教程来自B站尚硅谷&#xff1a; 尚硅谷Java入门视频教程&#xff0c;宋红康java基础视频 相关文件资料&#xff08;百度网盘&#xff09; 提取密码&#xff1a;8op3 idea 下载可以关注 软件管家 公众号 学习内容&#xff1a; 该视频共分为1-7…

STM32学习历程(day2)

GPIO解释 GPIO(General-purpose input/output) 可以配置为八种输入输出模式 引脚电平 0V-3.3V 部分引脚可容忍5v 输出模式可控制端口输出高低电平 用以驱动LED、控制蜂鸣器、模拟通信协议输出时序 输入模式可读取端口的高低电平或电压&#xff0c;用于读取按键输入、外界…

反序列化POP链技术详解

POP&#xff08; Procedure Oriented Programming &#xff09;链是反序列化安全问题中相对比较重要的技术点&#xff0c;相比于其他的反序列化问题&#xff0c;这种漏洞的产生更加难以发现&#xff0c;以及在利用上也比较复杂。 要掌握这个东西首先要先了解面向对象中的几个特…

利用coredump获取程序调用通路

一些前置知识 原文链接&#xff1a;https://blog.csdn.net/tenfyguo/article/details/8159176 一、什么是coredump 我们经常听到大家说到程序core掉了&#xff0c;需要定位解决&#xff0c;这里说的大部分是指对应程序由于各种异常或者bug导致在运行过程中异常退出或者中止&a…

MUNIK解读CMMI-带你认识什么是CMMI

1、什么是CMMI? CMMI是Capability Maturity Model Integration&#xff08;能力成熟度模型集成&#xff09;的简称&#xff0c;用于评估软件开发商的质量和能力。CMMI模型最初为美国国防部创建&#xff0c;后被广泛应用于其他领域&#xff0c;通过一整套过程改进实践&#xf…

uniapp自定义富文本现实组件(支持查看和收起)

废话不多说上代码 CollapseText.vue <template><view v-if"descr"><scroll-view class"collapse-text" :style"{maxHeight: computedMaxHeight}"><!-- <slot></slot> --><rich-text :nodes"descr&q…

【力扣 896】单调数列 C++题解(循环)

如果数组是单调递增或单调递减的&#xff0c;那么它是 单调 的。 如果对于所有 i < j&#xff0c;nums[i] < nums[j]&#xff0c;那么数组 nums 是单调递增的。 如果对于所有 i < j&#xff0c;nums[i]> nums[j]&#xff0c;那么数组 nums 是单调递减的。 当给定…

2-网页请求的原理

网页请求的原理 ​ 网络爬虫请求网页的过程可以理解为用户使用浏览器加载网页的过程&#xff0c;这个过程其实是向Web服务器发送请求的过程&#xff0c;即浏览器向Web服务器发送请求&#xff0c;Web服务器会将响应内容以网页形式返回给浏览器。因此&#xff0c;了解浏览器与We…

C语言 求球反弹的距离和高度

这个程序计算一个球从 100 米高度自由落下&#xff0c;并在第 10 次落地时经过的总距离及第 10 次反弹的高度。 #include <stdio.h>int main() {int n 10;double height 100.0;double totalDistance height;for (int i 1; i < n; i) {height / 2;totalDistance …

Android Studio下载Gradle特别慢,甚至超时,失败。。。解决方法

使用Android studio下载或更新gradle时超级慢怎么办&#xff1f; 切换服务器&#xff0c;立马解决。打开gradle配置文件 修改服务器路径 distributionUrlhttps\://mirrors.cloud.tencent.com/gradle/gradle-7.3.3-bin.zip 最后&#xff0c;同步&#xff0c;下载&#xff0c;速…

数据融合工具(1)指定路径下同名图层合并

情景再现&#xff0c;呼叫小编 ————数据合并时&#xff0c;你是否也经常碰到这些情况&#xff1f; 数据存在几何错误&#xff0c;合并失败&#xff01; 数据字段类型不一致&#xff0c;合并失败&#xff01; 合并工具运行有警告信息&#xff0c;不知道是否合并成功&…

2024年中国网络安全市场全景图 -百度下载

是自2018年开始&#xff0c;数说安全发布的第七版全景图。 企业数智化转型加速已经促使网络安全成为全社会关注的焦点&#xff0c;在网络安全边界不断扩大&#xff0c;新理念、新产品、新技术不断融合发展的进程中&#xff0c;数说安全始终秉承科学的方法论&#xff0c;以遵循…