嵌套式Sass訪問

Question

我是CSS和Sass的新手。我不知道如何改變我的頁面外觀。我一直在閱讀Sass文檔，並認爲我會用一個小引導程序來嘗試和練習。

示例代碼：

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

如果我改變發言權類導航欄頭的CSS，這會不會對SCSS代碼？

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

Answer 1

你需要了解上海社會科學院是什麼，對這些類型的框架最好是不要用新的CSS覆蓋，但覆蓋定義框架的顏色/排版等SASS參數。

例如，對於bootstrap，您可以查看_variables.scss以瞭解您可以更改的內容。爲了您例如，你可以查找導航欄，找到：

$navbar-height: 50px !default; 

現在，如果要覆蓋這一點，你可以做到這一點，只要你重新定義SASS參數導入了_variables.scss文件之後。如果你看看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文件中重寫的東西。所以forexample如果我期待在白手起家_navbar.scss組件文件生病發現：

.navbar-header { 
    @include clearfix(); 

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

含義我可以只添加在我_customOverrides.scss文件，我在導入的mybootstrap.scss結束下面 - 以覆蓋例如網格浮動的導航欄標題斷點。

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

希望這些提示將有所幫助 - 而且我確信一旦您習慣了SASS工作流程，您將永遠不會回頭！ :)