如何覆盖scss文件中的宽度和高度值答案

【问题标题】：How to override the width and height values in scss file如何覆盖scss文件中的宽度和高度值
【发布时间】：2018-11-12 05:21:54
【问题描述】：

我想覆盖 scss 文件中的默认值，例如

.auth-form {
width: 800px;
}

我在 class auth-form scss 文件中更改了宽度值。但它不起作用。

如何覆盖 scss 文件中的值。请告诉我。

【问题讨论】：

标签： css sass

【解决方案1】：

对您可能面临范围问题的情况做出假设。如果你有以下css：

.foo .bar {
    color: red;
}
.bar {
    color: blue;
}

.bar 将始终为红色，因为您没有覆盖正确范围内的选择器。

所以在你的情况下，你需要指定完整的选择器：

.full.scope .auth-form {
    width: 800px;
}

其中.full.scope 是.auth-form 的完整选择器。您可以在您使用浏览器检查器覆盖的 css 上使用完整的选择器。

另一种选择是使用!important css 关键字使属性优先，这样它将覆盖任何以前的定义：

.auth-form {
    width: 800px !important;
}

希望对你有帮助。

【讨论】：

【解决方案2】：

.scss (sass) 文件不能直接加载到浏览器中，它们需要先编译为.css 文件，然后由您的应用程序加载到浏览器中。

您似乎没有执行编译步骤（也称为预处理或预编译），这就是您在应用中看不到修改的原因。

编译的方式各不相同。您可以直接使用 sass（请参阅 here），或者如果您使用的是框架，则可能有工具可以结合此和其他自动化步骤。例如，在 Ruby-on-Rails 中，您可以以 gem 的形式安装所需的编译工具并运行：

bundle exec rake assets:precompile

由于您不提供有关您的环境/框架的详细信息，因此很难提供适用于您的确切程序。

【讨论】：