关于 SAP Spartacus feature library 里的 _index.scss 文件,和神奇的下划线省略行为
如下图所示:quick order 文件夹下存在一个 _index.scss 文件,其导入了 styles 文件夹下的 index:
然而,styles 文件夹下并没有 index.scss 文件,只有一个 _index.scss. 但是,ctrl + click 点击上图第一行代码后,会自动跳转到 styles 文件夹下的 _index.scss 文件:
查看这个 @import 的语法:
Sass 扩展了 CSS 的 @import 规则,能够导入 Sass 和 CSS 样式表,提供对 mixin、函数和变量的访问,并将多个样式表的 CSS 组合在一起。 与需要浏览器在呈现页面时发出多个 HTTP 请求的普通 CSS 导入不同,Sass 导入完全在编译期间处理。
Sass 导入的语法与 CSS 导入相同,只是它们允许多个导入用逗号分隔,而不是要求每个导入都有自己的 @import。 此外,在缩进语法中,导入的 URL 不需要引号。
考虑下列两个文件:
// foundation/_code.scss
code {padding: .25em;line-height: 0;
}
// foundation/_lists.scss
ul, ol {text-align: left;& & {padding: {bottom: 0;left: 0;}}
}
在我的 style.scss 文件里如何导入二者?
@import 'foundation/code', 'foundation/lists';
注意语法,slash 后面,下划线和扩展名 .scss 自动消失。也就是说,不需要显式把下划线
即 _
写到 @import
后面。
当 Sass 导入一个文件时,该文件被评估,就好像它的内容直接出现在 @import 的位置。 导入文件中的任何混入、函数和变量都可用,并且其所有 CSS 都包含在编写 @import 的确切位置。 更重要的是,在@import 之前定义的任何mixin、函数或变量(包括来自其他@imports)都可以在导入的样式表中使用。
注意,需要小心重复导入问题:
如果多次导入相同的样式表,则每次都会重新评估。 如果它只是定义了函数和 mixin,这通常没什么大不了的,但是如果它包含样式规则,它们将被多次编译为 CSS。
被导入 scss 文件的定位问题
为了确保样式表适用于每个操作系统,Sass 通过 URL 而不是文件路径导入文件。 这意味着您需要使用正斜杠,而不是反斜杠,即使您使用的是 Windows。
注意:如下图所示:Windows10 使用的是反斜杠:
Load paths
所有 Sass 实现都允许用户提供加载路径:Sass 在解析导入时将查找的文件系统上的路径。 例如,如果你通过 node_modules/susy/sass 作为加载路径,你可以使用@import “susy” 来加载 node_modules/susy/sass/susy.scss。
但是,导入将始终首先相对于当前文件进行解析。 仅当不存在与导入匹配的相关文件时才会使用加载路径。这可确保您在添加新库时不会意外弄乱相对导入。
与其他一些语言不同,Sass 不要求您使用 ./ 进行相对导入。相对导入始终可用。
Partials
按照惯例,仅用于导入而非自行编译的 Sass 文件以 _ 开头(如在 _code.scss 中)。 这些被称为部分,它们告诉 Sass 工具不要尝试自己编译这些文件。 您可以在导入部分时省略 _。
如果您在文件夹中写入 _index.scss 或 _index.sass,则在导入文件夹本身时,该文件将被加载到其位置。
下列是一个例子:
_code.scss 和 _lists.scss 被同一文件夹下的 _index.scss 导入:
导入时不需要使用相对路径,或者补全扩展名 .scss.
最后生成的 css:
更多Jerry的原创文章,尽在:“汪子熙”:
关于 SAP Spartacus feature library 里的 _index.scss 文件,和神奇的下划线省略行为相关推荐
- 如何在SAP Spartacus category 页面里拿到当前的category信息
需求 https://stackoverflow.com/questions/59950572/how-to-access-the-current-categorydata-in-a-category ...
- SAP Spartacus 从 Ngrx 里获取 navigation 的实时状态
我们打开SAP Spartacus首页时,在Chrome开发者工具里能观察到cx-storefront节点,即带有LoginPageTemplate class的自定义节点,class在start-n ...
- SAP Spartacus index.html里的meta标签
meta标签用来描述页面的元数据. 我把index.htmll里的meta标签注释掉,仍然能够正常工作,这是为什么呢? 后台url维护在Environment.occBaseUrl字段里: 注入Con ...
- SAP Spartacus 当购物车里添加的商品个数过多后引起的性能问题以及解决方案
问题:https://github.com/SAP/spartacus/issues/10379 解决方案:https://github.com/SAP/spartacus/pull/10865/fi ...
- SAP Spartacus User Form里checkbox的设计原理
user form里每个区域总共由3个元素组成: 一个label,充当container作用 一个span元素,维护textual label 一个实际的functional element labe ...
- SAP Spartacus B2B List里的listData$设计原理
UI components do not store response data from observables locally, which means destroy logic can be ...
- SAP Spartacus index.html 里的 occ-backend-base-url 如何被解析的?
index.html 里下图的 meta 标签页的解析逻辑: <meta name="occ-backend-base-url" content="OCC_BACK ...
- SAP Spartacus npm install 里包含的 postinstall
我执行 npm install 后: 根据关键字 postinstall 搜索,发现其定义在 package.json 文件 script 区域的 postinstall 里: "posti ...
- SAP Spartacus List Component 里定义的待显示 Popover 内容,如何传递到 Popover Component 里的?
中心思想:这个传递以 Popover Directive 为桥梁. PopoverComponent里的 content 属性: string 或者 TemplateRef,后者是 ng-templa ...
最新文章
- 如何访问docker内php,docker中容器之间如何访问
- fiddler设置抓取https请求后打开网页总是报“你的连接不是私密链接”的解决办法
- python在金融工程中的用途-金融工程现在用python多吗?
- Java虚拟机:对象创建过程与类加载机制、双亲委派模型
- QT的QRegularExpressionValidator类的使用
- 探讨C#中字符串的加密
- hdu 3062 Party(2-sat,3级)
- cvtcolor python opencv_13行代码实现:Python实时视频采集(附源码)
- Maven MyEclipse创建web项目没有src/maim/java
- SwitchHosts的安装及软件使用
- nginx从入门到精通:第一阶段快速入门
- 神经网络的发展与应用
- 特殊字符 U+200X/
- 用caffe框架做号牌识别笔记
- vue + echarts 省份地图 以及打包后地图加载不出来(比较详细)
- 浅谈老妈的QQ号被盗之后
- 晶体(晶体谐振器)和晶振(晶体振荡器)的区别
- 盘丝洞服务器维护,梦幻西游:明日维护公告解读!盘丝法宝调整,新增人物志玩法!...
- 使用postman注册登录后,原先记录消失
- google学术无法访问
热门文章
- mysql触发器 多个条件_当条件为真时,如何使用MySQL触发器更新多个表?
- 关联查询---Mybatis学习笔记(九)
- mongodb系列01--基础篇
- 设计一个可扩展的用户登录系统
- git回滚到任意版本
- iframe URI钓鱼
- 我的WCF之旅(1):创建一个简单的WCF程序
- 什么是卷影复制,卷影服务是什么
- BZOJ - 4196 软件包管理器 (树链剖分+dfs序+线段树)
- python元编程之使用动态属性实现定制类--特殊方法__setattr__,__getattribute__篇