Question

我是CSS和Sass的新手。我不确定如何更改页面的外观。我一直在阅读Sass文档，并且认为我会尝试使用一些Twitter bootstrap来尝试练习。

示例代码：

<div class="user_nav">
  <div class="navbar-wrapper">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">JobPost</a>
      </div>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav">

如果我要更改say class navbar-header的CSS，这会是Scss代码吗？

.user_nav {
   .navbar-wrapper {
      .container {
         .navbar-header {
             change here
         }
      }
   }
}

Answer 1

关于SASS需要了解的是，对于这些类型的框架，最好不要覆盖新的CSS，而是覆盖定义框架的颜色/排版等的SASS参数。

例如，对于bootstrap，您可以查看_variables.scss，了解您可以更改的内容。对于您的示例，您可以查找导航栏并查找：

$navbar-height: 50px !default;

现在，如果要覆盖它，只要在导入_variables.scss文件后重新定义SASS参数，就可以执行此操作。如果你看看bootstrap.scss，你会发现，与大多数框架一样，他们会尝试在组件中拆分所有这些。即以下是bootstrap.scss的第一行：

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset and dependencies
...

然后再往下看，您会看到列出的组件，这是您可以省略任何不使用的组件以避免膨胀CSS文件的地方。因此，您可以创建自己的文件副本，并删除不需要的组件，而不是使用bootstrap.scss，如果需要，还可以在变量中设置重新定义的参数。即：（mybootstrap.scss）：

// Core variables and mixins
@import "bootstrap/variables";
@import "bootstrap/mixins";

//override navbar height
$navbar-height: 150px; //you want to omit the !default as it only assigns the variable if it doesn't have a value already.

// Reset and dependencies
...

在某些情况下，如果不添加额外的CSS来覆盖框架的样式，则无法绕过。那么你想要做的是在sass文件中查找你想要覆盖的任何内容。因此，例如，如果我查看bootstraps _navbar.scss组件文件生病，请找到：

.navbar-header {
  @include clearfix();

  @media (min-width: $grid-float-breakpoint) {
    float: left;
  }
}

意思是我可以在我在mybootstrap.scss末尾导入的_customOverrides.scss文件中添加以下内容 - 以覆盖例如grid-float的navbar-header断点。

.navbar-header {
   @media (min-width: 500px) {
      float: left;
   }
}

希望这些提示有所帮助 - 我相信一旦你习惯了SASS工作流程，你就永远不会回去！：）

嵌套Sass访问

1 个答案: