嵌套的Sass訪問

Question

我是CSS和Sass的新手。 我不確定如何更改頁面的外觀。 我一直在閱讀Sass文檔，以為我會玩一些Twitter引導程序來嘗試和練習。

樣例代碼：

<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">

如果要更改類navbar-header的CSS，這將是Scss代碼嗎？

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

Answer 1

您需要了解的有關SASS的信息是，對於這類框架，最好的做法是不要用新的CSS覆蓋，而要覆蓋定義框架顏色/印刷術等的SASS參數。

例如，對於引導程序，您可以查看_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文件中添加以下內容-以覆蓋例如網格浮動的navbar-header斷點。

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

希望這些技巧會有所幫助-並且我相信一旦您習慣了SASS工作流程，您將永遠不會再回頭！ :)