当前位置: 首页 > Web前端 > HTML

SCSS文件中的感叹号用法——为变量设置默认值

时间:2023-04-02 18:21:51 HTML

如下图:$useTabsOnPDP:false!default;https://stackoverflow.com/que...含义如下:!default通常用于BootstrapSass。它类似于reverse!important。所有Bootstrap变量都设置为!default以允许开发人员进一步自定义Bootstrap。使用!defaultsass只会定义一个尚未设置的变量。//示例1Dresscolor=red$auroras-dress-color:blue;$auroras-dress-color:red;//Example2Dresscolor=red$auroras-dress-color:blue!default;$auroras-dress-color:red;//Example3连衣裙颜色=蓝色$auroras-dress-color:blue;$auroras-dress-color:red!default;那么为什么这很重要呢?Bootstrap是一个包。大多数人不编辑Bootstrap源代码。永远不要更新引导加载程序源。要自定义bootstrap,您可以添加自己的变量文件并使用bootstrap代码对其进行编译,但切勿接触本机bootstrap包。Bootstrapsass页面详细介绍了如何在文档中自定义和编译它。据我所知,TwitterBootstrap使用的是LESS。另一方面,!default实际上是Sass的一部分,它为Sass变量($var)提供默认值,这使得它在给定的上下文中无效,即使在Sass中也是如此。另外,我在LESS文档中找不到任何对!default的引用,据我所知,这是Sass独有的。您确定是在Bootstrap的源代码中而不是其他地方找到的吗?因为老实说,我不记得在Bootstrap的样式表中看到过Sass/SCSS代码。您可以在sass-lang网站的doc部分(变量)中找到以下确切定义和体面的解释-默认值:通常当您为变量赋值时,如果该变量已经有值,则其旧值将被覆盖.但是,如果您正在编写Sass库,您可能希望允许您的用户在使用它们生成CSS之前配置您的库变量。为了实现这一点,Sass提供了!default标志。变量只有在未定义或值为null时才被赋值。否则,将使用现有值。