【SASS/SCSS(二)】模块化语法

目录

一、@use

1、命名空间

2、私有变量

3、用with改变模块中的默认值

二、@forward

1、给forward模块起别名,让成员加前缀

2、利用hide or show手动控制成员的可访问性 

三、@import

1、不存在命名空间,成员变量在import之后直接公开

2、可以在嵌套语法中使用import

3、@import不可以用with进行配置,如果需要可以在@import语句前对模块变量重新赋值【此方法兼容性一般】


Sass中的模块化主要是指外部的scss、sass文件可以作为模块导入到其他文件中。 

如果一个自定义的sass、scss文件,仅作为库模块引入,那么我们的取名可以用短下划线开头 _,这样该文件不会自动去编译加载,而是仅会在被引用之后被编译。这样的文件我们称为Partial(代码片段)

如果在一个文件夹下(例如名为folder)定义 _index.scss 或者 _index.sass ,导入 folder(即直接导入文件夹名),其会自动解析文件夹中的index文件并导入

而模块中被定义的variables、functions、mixins则被称作member(成员)

模块的导入和使用主要由@use、@forward、@import三种语法来实现

*注意:三者导入的都是URL,而非file_path,可以自动解析相对定位。一些内置模块可以直接导入使用。

一、@use

1、命名空间

  • @use导入模块后,若在本文件调用模块中的成员,需要在以 模块名.成员  的形式访问
// src/_corners.scss
$radius: 3px;@mixin rounded {border-radius: $radius;
}// style.scss
@use "src/corners";.button {@include corners.rounded;padding: 5px + corners.$radius;
}
  • 可以用as给模块取别名,而 as * 代表无需访问模块名,可直接调用内部成员
// 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;
}

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

2、私有变量

模块里可以定义私有变量 , 形如  $-*  或者  $_*,导入后,外部无法访问模块内该私有变量。

// 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;
}

对于非私有变量,模块被调用后,不仅可以访问,还可以重新赋值

如果再次调用模块中的成员,将会是重新赋值后的值

3、用with改变模块中的默认值

// _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
);

但是,如果 A @use B , B  @use C,A是无法访问C模块中的成员的!如果要使得 C在A和B模块间通用,就需要使用下面的 @forward 

二、@forward

@forward本质是转发模块资源,是用于组织各文件中模块资源的方法。

但它本身的调用并不直接加载、编译scss文件,只是让模块中的资源经过导入后可公开访问

1、给forward模块起别名,让成员加前缀

给各模块的成员加上前缀,可以明确成员变量的来源,解决冲突

// src/_list.scss
@mixin reset {margin: 0;padding: 0;list-style: none;
}// bootstrap.scss
@forward "src/list" as list-*;// styles.scss
@use "bootstrap";li {@include bootstrap.list-reset;
}

2、利用hide or show手动控制成员的可访问性 

hide代表模块中被hide的成员不可公开访问;show代表模块中仅仅只有被show的成员可公开访问

形如:

// src/_list.scss
$horizontal-list-gap: 2em;@mixin list-reset {margin: 0;padding: 0;list-style: none;
}@mixin list-horizontal {@include reset;li {display: inline-block;margin: {left: -2px;right: $horizontal-list-gap;}}
}// bootstrap.scss
@forward "src/list" hide list-reset, $horizontal-list-gap;

3、可以修改模块中的默认值,之后也能为@use...with再度修改

@use...with不可以加 !default字段,是因为这已经处于要将模块编译的阶段。

但@forward在配置时,则可以加该字段:

// _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;
}// _opinionated.scss
@forward 'library' with ($black: #222 !default,$border-radius: 0.1rem !default
)

三、@import

@import作为css也支持的语法,已经在被慢慢淘汰,现在最推荐的还是用@use对模块进行导入。

但一些scss才支持的@import特性,还是值得我们了解~

1、不存在命名空间,成员变量在import之后直接公开

这也是最危险的一点,一旦import之后,成员均可直接访问而不存在模块化的命名空间,容易导致冲突。

2、可以在嵌套语法中使用import

在选择器嵌套中导入import,可以使得样式仅在当前选择器作用域下生效

// _theme.scss
pre, code {font-family: 'Source Code Pro', Helvetica, Arial;border-radius: 4px;
}//_library.scss
p {color: red;
}//boot.scss
div {@import "theme","library";width: 20px;
}

*可以用逗号分隔导入文件,一次性导入多个!

3、@import不可以用with进行配置,如果需要可以在@import语句前对模块变量重新赋值【此方法兼容性一般】

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

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

相关文章

springboot防止重复提交的方案有哪些

在Spring Boot中,防止接口或表单重复提交有多种策略,以下是几种常见且有效的方案: 前端控制: 禁用提交按钮:在表单提交后,使用JavaScript立即禁用提交按钮,防止用户再次点击。响应式提示&#x…

十、Java集合 ★ ✔(模块18-20)【泛型、通配符、List、Set、TreeSet、自然排序和比较器排序、Collections、可变参数、Map】

day05 泛型,数据结构,List,Set 今日目标 泛型使用 数据结构 List Set 1 泛型 1.1 泛型的介绍 ★ 泛型是一种类型参数,专门用来保存类型用的 最早接触泛型是在ArrayList,这个E就是所谓的泛型了。使用ArrayList时,只要给E指定某一个类型…

讲真,现在留给2024年下半年软考的时间还够吗?

常识是个好东西,但是有时候却容易蒙蔽咱们的双眼,就拿下半年软考而言,看起来现在才7月份,刚刚入伏,考试要到11月份,是冬天呢,中间还隔了一个完整的秋季,常识感觉还很遥远&#xff0c…

【Vue3】4个比较重要的设计模式!!

大家好,我是CodeQi! 一位热衷于技术分享的码仔。 在我投身于前端开发的职业生涯期间,曾有一次承接了一个大型项目的维护工作。此项目运用的是 Vue 框架,然而其代码结构紊乱不堪,可维护性极度糟糕😫。 这使我深刻领会到,理解并运用 Vue 中的重要设计模式是何等关键! …

对LinkedList ,单链表和双链表的理解

一.ArrayList的缺陷 二.链表 三.链表部分相关oj面试题 四.LinkedList的模拟实现 五.LinkedList的使用 六.ArrayList和LinkedList的区别 一.ArrayList的缺陷: 1. ArrayList底层使用 数组 来存储元素,如果不熟悉可以来再看看: ArrayList与顺序表-CSDN…

一些常见的网络故障

📑打牌 : da pai ge的个人主页 🌤️个人专栏 : da pai ge的博客专栏 ☁️宝剑锋从磨砺出,梅花香自苦寒来 ☁️运维工程师的职责:监…

【数据分析】Python数据分析实战:从零开始构建数据管道

Python数据分析实战:从零开始构建数据管道 引言一、数据获取二、数据清洗三、数据分析四、数据可视化五、案例研究:预测股票价格结论 我尝试访问您所提供的链接,但似乎该链接指向的内容已失效或被移除,因此无法直接获取并阅读该文…

【iOS】——ARC源码探究

一、ARC介绍 ARC的全称Auto Reference Counting. 也就是自动引用计数。使用MRC时开发者不得不花大量的时间在内存管理上,并且容易出现内存泄漏或者release一个已被释放的对象,导致crash。后来,Apple引入了ARC。使用ARC,开发者不再…

BUUCTF逆向wp [HDCTF2019]Maze

第一步 查壳,本题是32位,有壳,进行脱壳。 第二步 这里的 jnz 指令会实现一个跳转,并且下面的0EC85D78Bh被标红了,应该是一个不存在的地址,这些东西就会导致IDA无法正常反汇编出原始代码,也称…

中文科技核心论文发表

中文科技核心论文题目如下: 1.混凝土结构用纤维增强塑料筋的耐久性评述:适合建筑、结构、材料等专业 2.建筑工程用阻燃塑料的研究进展:适合建筑、材料专业 3.纤维增强热塑性塑料在面部护具中的应用研究:适合化工、医学、材料等专…

springcloud2021.x使用nacos做配置中心

spirngcloud2021.0.5使用nacos做配置中心遇到的问题 环境 jdk1.8,spring-boot 2.6.13,spring-cloud-alibaba 2021.0.5.0 ,spring-cloud 2021.0.5 方案一 application.properties # Nacos帮助文档: https://nacos.io/zh-cn/docs/concepts…

C++中的condition_variable:条件变量

理解 C 中的条件变量(Condition Variable) 在多线程编程中,我们常常需要一个线程等待某个条件的变化,比如等待数据的生成或某个标志位的设置。如果没有条件变量(condition_variable),线程可能会…

启智畅想火车类集装箱号码识别技术,软硬件解决方案

集装箱号码识别需求: 实时检测车皮号、火车底盘号码、集装箱号码,根据火车类型分为以下三种情况: 1、纯车皮,只检测车皮号; 2、火车拉货箱(半车皮),检测车皮号集装箱号码&#xff1b…

如何从0搭建一个Ai智体day01

📚《AI破局行动|AI智能体(coze)实战手册》: https://d16rg8unadx.feishu.cn/wiki/XQESwHW5HiPFlrkZbkqc0Xp7nEb 说明 这个是授权访问的,想学习加我 微信/ Github:** watchpoints 📺Day1-大圣直播…

玩转HarmonyOS NEXT之常用布局三

轮播(Swiper) Swiper组件提供滑动轮播显示的能力。Swiper本身是一个容器组件,当设置了多个子组件后,可以对这些子组件进行轮播显示。通常,在一些应用首页显示推荐的内容时,需要用到轮播显示的能力。 针对…

git开发流程

分支介绍 master - 主分支 所有提供给用户使用的正式版本,都在这个主分支上发布 开发者在此分支 不可进行 push 操作 dev - 开发分支 日常开发所使用的分支,开发者完成的阶段性功能模块将首先被合并到此分支 此分支亦是团队内部测试、阶段性工作验证…

Xcode 16 beta3 真机调试找不到 Apple Watch 的尝试解决

很多小伙伴们想用 Xcode 在 Apple Watch 真机上调试运行 App 时却发现:在 Xcode 设备管理器中压根找不到对应的 Apple Watch 设备。 大家是否已将 Apple Watch 和 Mac 都重启一万多遍了,还是束手无策。 Apple Watch not showing in XCodeApple Watch wo…

C++基础语法:STL之容器(1)--容器概述和序列概述

前言 "打牢基础,万事不愁" .C的基础语法的学习 引入 STL是标准模板库,类模板主要是用来做容器的,所以个人理解:标准模板库是"标准容器库".容器是STL的核心 .以<C Prime Plus> 6th Edition(以下称"本书")内容理解容器. 类模板内容回顾 类…

NineData全面支持PostgreSQL可视化表结构设计

“PostgreSQL 是最像 Oracle 的开源关系型数据库“&#xff0c;也正因为如此&#xff0c;很多企业都青睐 PostgreSQL&#xff0c;拿它当成 Oracle 的替代品。所以毫无疑问&#xff0c;目前 PostgreSQL 在企业中非常常见。 对于直接接触 PostgreSQL 的开发人员而言&#xff0c;…

echarts多柱堆叠的X轴顺序

在一些图表场景中&#xff0c;需要显示多柱堆叠的数据&#xff0c;那么X轴上每一段单位区域内会有多根柱子&#xff0c;每一根柱子标识不同的数量项含义&#xff0c;那么怎样控制这几根柱的左右顺序呢&#xff1f; 其实这跟echarts的option里的series由关&#xff0c;开始我以为…