【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 *,给该模块中定义的变量赋值,将覆盖其在该模块中的值。

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

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

相关文章

Hive面试问题

1.hive如何自定义函数 2.hive优化 3.hive数据倾斜 1.数据倾斜的表现 数据倾斜是由于数据分布不均匀&#xff0c;造成数据大量的集中到一点&#xff0c;造成数据热点的现象。 主要表现&#xff1a;任务进度长时间维持在 99%或者 100%的附近&#xff0c;查看任务监控页面Yarn(808…

分析示例 | Simufact焊接工艺仿真变形精确预测汽车结构

导语 焊接是汽车制造过程中一个关键环节&#xff0c;白车身、发动机、底盘和变速箱等都离不开焊接工艺的应用&#xff0c;主要涉及气保焊、电阻点焊、激光焊、电子束焊等多种焊接工艺。由于汽车车型众多、成形结构复杂、汽车制造质量、效率、成本等方面的综合要求。如何高效、…

杰理AC632N提升edr的hid传输速率, 安卓绝对坐标触摸点被识别成鼠标的修改方法

第一个问题: 首先修改edr的hid传输速率.修改你的板级配置,里面的一个地方给注释掉了,请打开那个注释就能提升edr的hid传输效率了 第二个问题: 修改632n系别把触摸板的hid报告描述符识别成鼠标点,修改如下: 注释掉上面的pnp,改成下面的

element plus的容器组件

element-plus的容器组件主要有el-container,el-aside,el-header,el-main,el-footer,后面4个组件其父组件必须是el-container。 el-container采用flex布局&#xff0c;如果其子元素包含el-header或el-footer时会采用垂直布局&#xff0c;否则会采用水平布局&#xff0c;可设置其…

LeetCode|938. Range Sum of BST

. 序言 开启python刷题时代&#xff0c;主要也是为了面试。 . 题目 Given the root node of a binary search tree and two integers low and high, return the sum of values of all nodes with a value in the inclusive range [low, high]. Example 1: Input: root …

教程 | Navicat 17 管理连接新方法

Navicat 17 提供了比以往更多的连接数据库实例的方式。除了传统的连接字符串方式以外&#xff0c;Navicat 17 还支持 URI 连接&#xff0c;无论身在何处&#xff0c;都可以轻松地通过 URI 访问对象。另外&#xff0c;还有一个新的管理连接功能&#xff0c;即允许你通过一个以用…

大数据揭秘

起源 不管是国内&#xff0c;国外的招聘目前数据分析工程师&#xff0c;或者是大数据工程师我感觉都是处于启蒙阶段&#xff0c;对于数据分析或者大数据没有什么体系技术栈一说&#xff0c;相比于前后端&#xff0c;除了高端互联网企业其他的企业招数据分析工程师我认为目前都…

公有云服务器部署springboot工程详细步骤

以下是在公有云服务器上部署Spring Boot工程的详细步骤&#xff1a; 在公有云服务器上安装Java运行环境&#xff1a;&#xff08;记得配置环境变量&#xff09; sudo apt update sudo apt install default-jre下载和部署Spring Boot工程&#xff1a; 将Spring Boot工程打包成可…

深入Maven:从入门到精通的全面指南

目录 Maven简介安装MavenMaven的基本概念 项目对象模型&#xff08;POM&#xff09;依赖管理生命周期插件 Maven命令Maven仓库Maven的构建生命周期Maven插件Maven与IDE的集成Maven高级主题 多模块项目自定义插件开发使用profiles 常见问题与解决方案Maven的最佳实践总结与参考…

后端大量数据返回,采用数据压缩+分片操作,加快前端响应速度,个人技术总结

1. 业务场景 场景类似于&#xff0c;可以查看到这段时间内指定的所有物品的运动轨迹&#xff0c;可以进行回放操作。 2. 解决方案 2.1. 在不考虑压缩的情况&#xff0c;可以尽可能减少传输数据的大小 比如 {[{"consDept":"A部门","consDeptCode&…

【全开源】房屋出租出售预约系统(FastAdmin+ThinkPHP+Uniapp)

房屋出租出售预约系统&#xff1a;一站式解决房产交易难题 一款基于FastAdminThinkPHPUniapp开发的房屋出租出售预约系统&#xff0c;支持小程序、H5、APP&#xff0c;包含房客、房东(高级授权)、经纪人(高级授权)三种身份。核心功能有&#xff1a;新盘销售、房屋租赁、地图找…

Python 技巧分享:NEF 文件的元数据提取

介绍 随着摄影技术的不断发展&#xff0c;NEF 文件作为尼康相机的 RAW 格式文件&#xff0c;因其包含丰富的图像数据和元数据&#xff0c;备受摄影爱好者和专业摄影师的青睐。提取 NEF 文件中的元数据对照片管理、分析及处理具有重要意义。本文将介绍如何使用 Python 技术&…

慎投!Hindawi这本SCI还在检,这里已被踢!新增14本Scopus期刊被剔除!

本周投稿推荐 SSCI • 中科院2区&#xff0c;6.0-7.0&#xff08;录用友好&#xff09; EI • 各领域沾边均可&#xff08;2天录用&#xff09; CNKI • 3天内初审录用&#xff0c;随即出版&#xff08;急录友好&#xff09; SCI&EI • 4区生物医学类&#xff0c;0…

电商数据驱动的决策智慧:深度解析数据采集与应用||电商API接口接入与应用

引言 在数字化时代&#xff0c;数据已成为电商企业最宝贵的资产之一。通过有效的数据采集&#xff0c;企业能够洞察市场动态、理解消费者需求、优化运营策略&#xff0c;从而在激烈的市场竞争中脱颖而出。本文将深入探讨电商数据采集的重要性、常用方法以及应用实践。 一、电商…

C语言—内存函数

1. memcpy 使用和模拟实现 void* memcpy&#xff08;void* destination&#xff0c;const void* source&#xff0c;size_t num&#xff09;&#xff1b; 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置。这个函数在遇到 ‘\0’ 的时候并不…

Docker 教程-介绍-2

快速了解docker有什么。 Docker简介 Docker 是一个开源的应用容器引擎&#xff0c;基于Go语言开发&#xff0c;并遵循Apache 2.0协议。它允许开发者将应用及其依赖包打包进一个可移植的容器中&#xff0c;这些容器可以发布到任何支持Docker的Linux或Windows机器上&#xff0c…

神经网络 torch.nn---Convolution Layers

torch.nn — PyTorch 2.3 documentation torch.nn - PyTorch中文文档 (pytorch-cn.readthedocs.io) torch.nn和torch.nn.functional的区别 torch.nn是对torch.nn.functional的一个封装&#xff0c;让使用torch.nn.functional里面的包的时候更加方便 torch.nn包含了torch.nn.…

Linux日志服务rsyslog深度解析(上)

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Linux &#xff1a;从菜鸟到飞鸟的逆袭》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、日志在Linux系统中的作用 2、rsyslog历史背景 …

保姆级讲解 FTP服务器的搭建、配置与管理

本来目录很长的 因为感觉不太美观 所以小标题都删掉了 本文介绍了 本地用户的FTP服务器搭建实例匿名用户的FTP服务器搭建实例虚拟用户的FTP服务器搭建实例企业常见类型搭建实验 配置与管理FTP服务器 配置与管理FTP服务器一、FTP相关知识二、项目设计与准备三、项目实施四、认识…

实验一、网络传输介质————双绞线 《计算机网络》

蝙蝠身上长鸡毛&#xff0c;忘了自己是什么鸟。 目录 一、实验目的 二、实验内容 1.双绞线的原理以及分类 2.了解双绞线的性质、结构与特性 3.掌握双绞线的制作方法 4.了解双绞线的材质 5.了解双绞线的发展趋势 三、实验小结 一、实验目的 1.双绞线的原理以及分类 2.了…