중첩 된 Sass 액세스

Question

저는 CSS와 Sass를 처음 사용합니다. 내 페이지의 모양을 변경하는 방법을 잘 모르겠습니다. 나는 Sass 문서를 읽고 있었고, 시도하고 연습하기 위해 약간의 트위터 부트 스트랩으로 놀아 다녔다.

샘플 코드 : 내가 말할 클래스 네비게이션 바 헤더의 CSS를 변경한다면

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

는, 이것은 SCSS 코드 것입니까? 당신이 SASS에 대해 알아야 할

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

Answer 1

는 프레임 워크의 이러한 종류의 가장 좋은 프레임 워크의 색상/입력 체계 등을 정의하는 SASS 매개 변수를 새로운 CSS를 무시하지만, 오버라이드 (override)하지 않는 것입니다.

예를 들어 부트 스트랩의 경우 변경할 수있는 항목에 대해 _variables.scss를 조사 할 수 있습니다. 귀하의 예를 들어, 당신은 네비게이션 바를 조회하고 찾을 수 :

$navbar-height: 50px !default; 

를 이제이 메소드를 오버라이드 (override) 할 경우, 당신은 오래 당신이 _variables.scss 파일을 가져온 후에는 SASS 매개 변수를 재정의 같은 것을 할 수 있습니다. bootstrap.scss를 보면 대부분의 프레임 워크와 마찬가지로 컴포넌트에서이 모든 것을 분할하려고합니다. 이것은 당신이 어떤 구성 요소를 생략 할 수있는 당신이 당신의 CSS 파일을 복부 팽만 방지하기 위해 사용하지 않는 것입니다 더 아래 당신이 성분이 등재 볼 수 있습니다 그리고

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

// Reset and dependencies 
... 

: 즉 다음과 bootstrap.scss에서 첫 번째 라인이다 . 그래서 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 파일에서 오버라이드하고 싶은 것이 무엇이든지 조회하는 것입니다. 내가 부트 스트랩 _navbar.scss 구성 요소 파일에 보면 그래서 forexample 아픈 것을 찾을 수 있습니다 : 난 그냥 내가 mybootstrap.scss의 말에 가져 나의 _customOverrides.scss 파일에 다음을 추가 할 수 있습니다 의미

.navbar-header { 
    @include clearfix(); 

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

- 순서로를 예를 들어 grid-float에 대한 navbar-header 중단 점을 무시합니다.

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

희망 팁이 도움이 될 것입니다. SASS 워크 플로우에 익숙해지기를 바랍니다. :)