SCSS 文件里的感叹号用法 - 给变量设置默认值

举报
Jerry Wang 发表于 2021/09/27 13:39:58 2021/09/27
【摘要】 如下图所示:$useTabsOnPDP: false !default;https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean含义如下:!default 在 Bootstrap Sass 中经常使用。 它类似于反向 !important。 所有 Bootstrap ...

如下图所示:

$useTabsOnPDP: false !default;

https://stackoverflow.com/questions/10643107/what-does-default-in-a-css-property-value-mean

含义如下:

!default 在 Bootstrap Sass 中经常使用。 它类似于反向 !important。 所有 Bootstrap 变量都使用 !default 设置,以允许开发人员进一步自定义引导程序。 使用 !default sass 只会定义一个尚未设置的变量。

//Example1 Dress color = red
$auroras-dress-color: blue;
$auroras-dress-color: red;

//Example2 Dress color = red
$auroras-dress-color: blue !default;
$auroras-dress-color: red;

//Example3 Dress color = blue
$auroras-dress-color: blue;
$auroras-dress-color: red !default;

那么为什么这很重要? Bootstrap 是一个包。 大多数人不会编辑 Bootstrap 源代码。 永远不要更新引导程序源。 要自定义引导程序,您将添加自己的变量文件并使用引导程序代码编译它,但永远不要接触本机引导程序包。 Bootstrap sass 的页面在文档中详细介绍了如何自定义和编译它。

据我所知,Twitter Bootstrap 使用 LESS。 另一方面,!default 实际上是 Sass 的一部分,用于提供 Sass 变量 ($var) 默认值,这会使它在给定的上下文中无效,即使在 Sass 中也是如此。

此外,我在 LESS 文档中找不到任何对 !default 的引用,据我所知,它是 Sass 独有的。 你确定你在 Bootstrap 的源代码中找到了这个,而不是在其他地方? 因为老实说我不记得在 Bootstrap 的样式表中看到过 Sass/SCSS 代码。

您可以在 sass-lang 网站的 doc 部分(变量)中找到以下确切定义和体面的解释 - 默认值:

通常当你给一个变量赋值时,如果该变量已经有一个值,它的旧值会被覆盖。 但是,如果您正在编写 Sass 库,您可能希望允许您的用户在使用它们生成 CSS 之前配置您的库变量。 为了实现这一点,Sass 提供了 !default 标志。 仅当该变量未定义或其值为 null 时,才会为该变量赋值。 否则,将使用现有值。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。