当前位置: 首页 > news >正文

【SCSS】use的详细使用规则

目录

  • @use
    • 加载成员
    • 选择命名空间
    • 私有成员
    • 配置
    • 使用 Mixin
    • 重新赋值变量

@use

从其他 Sass 样式表中加载 mixins、函数和变量,并将来自多个样式表的 CSS 组合在一起。@use加载的样式表被称为“模块”。

加载成员

// src/_corners.scss
$radius: 3px;@mixin rounded {border-radius: $radius;
}
// style.scss
@use "src/corners";.button {@include corners.rounded;padding: 5px + corners.$radius;
}

选择命名空间

默认情况下,模块的命名空间只是其 URL 的最后一个组成部分,没有文件扩展名。但是,有时您可能想要选择不同的命名空间——您可能想要为经常引用的模块使用较短的名称,或者您可能正在加载具有相同文件名的多个模块。你可以通过写@use "<url>" as <namespace>,来做到这一点。

// src/_corners.scss
$radius: 3px;@mixin rounded {border-radius: $radius;
}
// style.scss
@use "src/corners" as c;.button {@include c.rounded;padding: 5px + c.$radius;
}

甚至可以通过编写@use "<url>" as *.不过,建议只对编写的样式表执行此操作;否则,可能会引入导致名称冲突的新成员!

// src/_corners.scss
$radius: 3px;@mixin rounded {border-radius: $radius;
}
// style.scss
@use "src/corners" as *;.button {@include rounded;padding: 5px + $radius;
}

私有成员

如果你想让一个成员对整个包而不是单个模块私有,只是不要从你的包的任何入口点转发它的模块(你告诉用户加载以使用你的包的样式表)。您甚至可以在转发其模块的其余部分时隐藏该成员!

// src/_corners.scss
$-radius: 3px;@mixin rounded {border-radius: $-radius;
}
// style.scss
@use "src/corners";.button {@include corners.rounded;// This is an error! $-radius isn't visible outside of `_corners.scss`.padding: 5px + corners.$-radius;
}

配置

样式表可以使用!default标志定义变量,以使其可配置。要加载带有配置的模块,使用@use<url>with加载<variable>:<value>,<variable>:<value>样式,配置的值将覆盖变量的默认值。

// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;code {border-radius: $border-radius;box-shadow: $box-shadow;
}
// style.scss
@use 'library' with ($black: #222,$border-radius: 0.1rem
);

使用 Mixin

使用@use ... with,配置模块非常方便,尤其是在使用编写的库时,@import规则。但它并不是特别灵活,不建议将其用于更高级的用例。如果发现自己想要一次配置多个变量,将映射作为配置传递,或者在模块加载后更新配置,请考虑编写一个mixin来设置您的变量,然后再编写一个mixin来注入样式。

// _library.scss
$-black: #000;
$-border-radius: 0.25rem;
$-box-shadow: null;/// If the user has configured `$-box-shadow`, returns their configured value.
/// Otherwise returns a value derived from `$-black`.
@function -box-shadow() {@return $-box-shadow or (0 0.5rem 1rem rgba($-black, 0.15));
}@mixin configure($black: null, $border-radius: null, $box-shadow: null) {@if $black {$-black: $black !global;}@if $border-radius {$-border-radius: $border-radius !global;}@if $box-shadow {$-box-shadow: $box-shadow !global;}
}@mixin styles {code {border-radius: $-border-radius;box-shadow: -box-shadow();}
}
// style.scss
@use 'library';@include library.configure($black: #222,$border-radius: 0.1rem
);@include library.styles;

重新赋值变量

加载模块后,可以重新赋值其变量。

// _library.scss
$color: red;
// _override.scss
@use 'library';
library.$color: blue;
// style.scss
@use 'library';
@use 'override';
@debug library.$color;  //=> blue

如果使用as *,给该模块中定义的变量赋值,将覆盖其在该模块中的值。

相关文章:

【SCSS】use的详细使用规则

目录 use加载成员选择命名空间私有成员配置使用 Mixin重新赋值变量 use 从其他 Sass 样式表中加载 mixins、函数和变量&#xff0c;并将来自多个样式表的 CSS 组合在一起。use加载的样式表被称为“模块”。 加载成员 // src/_corners.scss $radius: 3px;mixin rounded {bord…...

数据结构(C):二叉树前中后序和层序详解及代码实现及深度刨析

目录 &#x1f31e;0.前言 &#x1f688;1.二叉树链式结构的代码是实现 &#x1f688;2.二叉树的遍历及代码实现和深度刨析代码 &#x1f69d;2.1前序遍历 ✈️2.1.1前序遍历的理解 ✈️2.1.2前序代码的实现 ✈️2.1.3前序代码的深度解剖 &#x1f69d;2.2中序遍历 ✈…...

Win11可以安装AutoCAD2007

1、在win11中&#xff0c;安装AutoCAD2007&#xff0c;需要先安装NET组件。否则会提示缺少".net文件" 打开“控制面板”&#xff0c;点击“程序”&#xff0c;点击“程序和功能”&#xff0c;点击“启用或关闭Windows功能”&#xff0c;勾选“.NET FrameWork 3.5”&a…...

C#操作MySQL从入门到精通(14)——汇总数据

前言 我们有时候需要对数据库查询的值进行一些处理,比如求平均值等操作,本文就是详细讲解这些用法,本文测试使用的数据库数据如下: 1、求平均值 求所有student_age 列的平均值 string sql = string.Empty; if (radioButton_AVG.Checked) {sql = “select AVG( student_…...

【设计模式深度剖析】【2】【行为型】【命令模式】| 以打开文件按钮、宏命令、图形移动与撤销为例加深理解

&#x1f448;️上一篇:模板方法模式 | 下一篇:职责链模式&#x1f449;️ 设计模式-专栏&#x1f448;️ 文章目录 命令模式定义英文原话直译如何理解呢&#xff1f; 四个角色1. Command&#xff08;命令接口&#xff09;2. ConcreteCommand&#xff08;具体命令类&…...

【随手记】maplotlib.use函数设置图像的呈现方式

matplotlib.use() 函数用于设置 matplotlib 的后端&#xff0c;这会影响图形的呈现方式。不同的后端适用于不同的环境和需求。下面列出一些常用的后端及其描述&#xff1a; 常见后端参数 Agg: 参数&#xff1a;agg描述&#xff1a;基于Anti-Grain Geometry的后端&#xff0c;适…...

LLVM Cpu0 新后端 系列课程总结

想好好熟悉一下llvm开发一个新后端都要干什么&#xff0c;于是参考了老师的系列文章&#xff1a; LLVM 后端实践笔记 代码在这里&#xff08;还没来得及准备&#xff0c;先用网盘暂存一下&#xff09;&#xff1a; 链接: https://pan.baidu.com/s/1yLAtXs9XwtyEzYSlDCSlqw?…...

【云原生】Kubernetes----RBAC用户资源权限

目录 引言 一、Kubernetes安全机制概述 二、认证机制 &#xff08;一&#xff09;认证方式 1.HTTPS证书认证 1.1 证书颁发 1.2 config文件 1.3 认证类型 1.4 Service Account 1.4.1 作用 1.4.2 包含内容 1.4.3 与Secret的关系 2.Bearer Tokens 3.基本认证 三、鉴…...

ORA-01652 表空间不够解决方案

前章&#xff1a;出现表空间不足不要手动强制删除对应数据文件存储目录下的DBF文件&#xff0c;需要用SQL语句进行数据文件的DROP&#xff0c;否则会导致ORA-01033报错&#xff0c;因为我没有开启数据库的归档所以不能通过RECOVER的形式找回数据文件最后只能重装本地ORACLE。 …...

亚马逊 AWS 视频转码功能、AWS Elemental MediaConvert 中创建和管理转码作业

上传的视频需要转码成不同的编码, 可以直接在 AWS Elemental MediaConvert 中创建和管理转码作业 AWS Elemental MediaConvert 中创建和管理转码作业 /*** 视频转码* return bool* author wzb* data 2024/5/30*/function videoTranscode(&$data){$fileId $data[id] ?? …...

RocketMQ可视化界面安装

RocketMQ可视化界面安装 **起因&#xff1a;**访问rocketmq-externals项目的git地址&#xff0c;下载了源码&#xff0c;在目录中并没有找到rocketmq-console文件夹。 git下面文档提示rocketMQ的仪表板转移到了新的项目中&#xff0c;点击仪表板到新项目地址&#xff1b; 下载…...

【ffmpeg】本地格式转换 mp4转wav||裁剪mp4

个人感受&#xff1a;太爽了&#xff01;&#xff01;&#xff01;&#xff08;可能用惯了转换网站和无良的转换软件&#xff09; ———— 使用FFmpeg把mp4文件转换为WAV文件 - 简书 (jianshu.com) FFMPEG 视频分割和合并 - 简书 (jianshu.com) ———— 示例 ffmpeg -i …...

基于Django+MySQL的智慧校园系统

此项目基于Django MySQL HTML CSS JS jQuery bootstrap实现的功能有 学生管理部门管理代办清单管理校园论坛校园医疗服务校园看点校园生活助手常用功能入口 1. 一些注意点 1. 页面body会自动有一些边界距&#xff0c;处理方法&#xff1a; <head><style>b…...

Linux基础指令(一)

前言 Linux基础指令主要学习&#xff1a;对目录、文件、压缩包、匹配查找&#xff0c;权限等操作 第一次接触ubuntu需要知道的基本知识 sudo passwd root 先给root用户设置密码 su root 切换到root用户 su zhangsan …...

三极管十大品牌

三极管十大品牌-三极管品牌-晶体三极管哪个品牌好-Maigoo品牌榜...

需求记录(共享元素)

MainActivity1 列表展示&#xff0c;使用共享元素完成页面间的切换 package com.example.animactivity;import android.annotation.SuppressLint; import android.app.ActivityOptions; import android.content.Intent; import android.os.Build; import android.os.Bundle; i…...

.Net 使用 MongoDB

安装nuget包 MongoDB.Driver 简单代码 using MongoDB.Bson; using MongoDB.Driver; using System.Buffers; using System.Collections.Concurrent; using System.Diagnostics;namespace ConsoleApp4 {internal class Program{static void Main(string[] args){var client = ne…...

【TensorFlow深度学习】值函数估计:蒙特卡洛方法与TD学习

值函数估计&#xff1a;蒙特卡洛方法与TD学习 值函数估计&#xff1a;蒙特卡洛方法与TD学习的深度探索蒙特卡洛方法时序差分学习(TD)Python代码示例结论 值函数估计&#xff1a;蒙特卡洛方法与TD学习的深度探索 在强化学习的奇妙世界里&#xff0c;值函数估计扮演着至关重要的…...

成功解决ModuleNotFoundError: No module named ‘cv2’

成功解决ModuleNotFoundError: No module named ‘cv2’ &#x1f308; 欢迎莅临我的个人主页&#x1f448;这里是我深耕Python编程、机器学习和自然语言处理&#xff08;NLP&#xff09;领域&#xff0c;并乐于分享知识与经验的小天地&#xff01;&#x1f387; &#x1f393;…...

中国蚁剑 安装教程 2024年5月

2024/5/11 中国蚁剑 安装教程 一、下载中国蚁剑的加载器和核心源码&#xff08;两个都要用到&#xff09; github官方下载地址&#xff1a;https://github.com/AntSwordProject/ 参考文档&#xff1a;antSword/README_CN.md at master AntSwordProject/antSword GitHub 核…...

超短脉冲激光自聚焦效应

前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应&#xff0c;这是一种非线性光学现象&#xff0c;主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场&#xff0c;对材料产生非线性响应&#xff0c;可能…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

前端导出带有合并单元格的列表

// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...