css - 如何在 Bootstrap v3.3.7 的 SCSS 版本中使用变量？

Question

我在我的元素中使用 Bootstrap v3 的时间太长了。我通常使用 LESS，因为我发现它是处理自定义样式的最佳方式。例如。如果我想创建一个自定义导航栏，我所要做的就是编写如下内容:

@navbar-height: 80px;
@navbar-default-bg: #f0f0f0;
@navbar-default-link-color: #999;

@media(max-width: @screen-xs-max) {
  .navbar-btn {
     height: 50px;
     line-height: 50px;
     padding: 0 10px;
     margin-top: (@navbar-height - 50px) / 2;
     margin-bottom: (@navbar-height - 50px) / 2;
  }
}

(这段代码只是一个例子，没有任何意义)

我的一个客户坚持认为我必须为一个新元素使用 SCSS，但是那里的变量根本不起作用(我使用的是 Bootstrap v3 的 SCSS 版本)。 SCSS 变量应该以不同的方式处理吗？

Answer 1

不是所有的 CSS 预处理器都需要转换为 CSS 才能在浏览器中运行吗？那么，用 SCSS 还是 LESS 编写它真的很重要，因为最终代码将被编译为 CSS，对吧？无论如何，回到你的问题，我认为如果你输入 $

而不是 @ 会起作用

$navbar-height: 80px;
$navbar-default-bg: #f0f0f0;
$navbar-default-link-color: #999;

$media(max-width: $screen-xs-max) {
  .navbar-btn {
     height: 50px;
     line-height: 50px;
     padding: 0 10px;
     margin-top: ($navbar-height - 50px) / 2;
     margin-bottom: ($navbar-height - 50px) / 2;
  }
}

如果你读了这篇文章，你应该会有更好的想法 CSS preprocessors