当前位置: 首页 > 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 核…...

uniapp 对接腾讯云IM群组成员管理(增删改查)

UniApp 实战&#xff1a;腾讯云IM群组成员管理&#xff08;增删改查&#xff09; 一、前言 在社交类App开发中&#xff0c;群组成员管理是核心功能之一。本文将基于UniApp框架&#xff0c;结合腾讯云IM SDK&#xff0c;详细讲解如何实现群组成员的增删改查全流程。 权限校验…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

cf2117E

原题链接&#xff1a;https://codeforces.com/contest/2117/problem/E 题目背景&#xff1a; 给定两个数组a,b&#xff0c;可以执行多次以下操作&#xff1a;选择 i (1 < i < n - 1)&#xff0c;并设置 或&#xff0c;也可以在执行上述操作前执行一次删除任意 和 。求…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

网站指纹识别

网站指纹识别 网站的最基本组成&#xff1a;服务器&#xff08;操作系统&#xff09;、中间件&#xff08;web容器&#xff09;、脚本语言、数据厍 为什么要了解这些&#xff1f;举个例子&#xff1a;发现了一个文件读取漏洞&#xff0c;我们需要读/etc/passwd&#xff0c;如…...

《C++ 模板》

目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板&#xff0c;就像一个模具&#xff0c;里面可以将不同类型的材料做成一个形状&#xff0c;其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式&#xff1a;templa…...

A2A JS SDK 完整教程:快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...