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进行新项目，但是变量不起作用（我使用了SCSS版本的Bootstrap v3）。应该以不同的方式处理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

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

1 个答案: