嵌套式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工作流程，您将永远不会回头！ :)