Jekyll 프로젝트에서 사전 정의 된 새시 변수를 찾을 수 없습니다.

Question

저는 Jeykll and Sass를 새로 소개하며 빠른 질문을합니다. 새 프로젝트를 시작할 때 사전 구축 된 테마 내에서 이러한 변수는 어디에 정의되어 있습니까?

빌드를 통해 알 수없는 것 같습니다. 이것은 _sass/layout.scss 디렉토리에 있습니다.

*/ 
.site-header { 
    border-top: 5px solid $grey-color-dark; 
    border-bottom: 1px solid $grey-color-light; 
    min-height: 56px; 

    // Positioning context for the mobile navigation icon 
    position: relative; 
} 

.site-title { 
    font-size: 26px; 
    line-height: 56px; 
    letter-spacing: -1px; 
    margin-bottom: 0; 
    float: left; 

    &, 
    &:visited { 
     color: $grey-color-dark; 
    } 
} 

.site-nav { 
    float: right; 
    line-height: 56px; 

    .menu-icon { 
     display: none; 
    } 

    .page-link { 
     color: $text-color; 
     line-height: $base-line-height; 

     // Gaps between nav items, but not on the first one 
     &:not(:first-child) { 
      margin-left: 20px; 
     } 
    } 

    @include media-query($on-palm) { 
     position: absolute; 
     top: 9px; 
     right: 30px; 
     background-color: $background-color; 
     border: 1px solid $grey-color-light; 
     border-radius: 5px; 
     text-align: right; 

     .menu-icon { 
      display: block; 
      float: right; 
      width: 36px; 
      height: 26px; 
      line-height: 0; 
      padding-top: 10px; 
      text-align: center; 

      > svg { 
       width: 18px; 
       height: 15px; 

       path { 
        fill: $grey-color-dark; 
       } 
      } 
     } 

     .trigger { 
      clear: both; 
      display: none; 
     } 

     &:hover .trigger { 
      display: block; 
      padding-bottom: 5px; 
     } 

     .page-link { 
      display: block; 
      padding: 5px 10px; 
     } 
    } 
} 



/** 
* Site footer 
*/ 
.site-footer { 
    border-top: 1px solid $grey-color-light; 
    padding: $spacing-unit 0; 
} 

.footer-heading { 
    font-size: 18px; 
    margin-bottom: $spacing-unit/2; 
} 

.contact-list, 
.social-media-list { 
    list-style: none; 
    margin-left: 0; 
} 

.footer-col-wrapper { 
    font-size: 15px; 
    color: $grey-color; 
    margin-left: -$spacing-unit/2; 
    @extend %clearfix; 
} 

.footer-col { 
    float: left; 
    margin-bottom: $spacing-unit/2; 
    padding-left: $spacing-unit/2; 
} 

.footer-col-1 { 
    width: -webkit-calc(35% - (#{$spacing-unit}/2)); 
    width:   calc(35% - (#{$spacing-unit}/2)); 
} 

.footer-col-2 { 
    width: -webkit-calc(20% - (#{$spacing-unit}/2)); 
    width:   calc(20% - (#{$spacing-unit}/2)); 
} 

.footer-col-3 { 
    width: -webkit-calc(45% - (#{$spacing-unit}/2)); 
    width:   calc(45% - (#{$spacing-unit}/2)); 
} 

@include media-query($on-laptop) { 
    .footer-col-1, 
    .footer-col-2 { 
     width: -webkit-calc(50% - (#{$spacing-unit}/2)); 
     width:   calc(50% - (#{$spacing-unit}/2)); 
    } 

    .footer-col-3 { 
     width: -webkit-calc(100% - (#{$spacing-unit}/2)); 
     width:   calc(100% - (#{$spacing-unit}/2)); 
    } 
} 

@include media-query($on-palm) { 
    .footer-col { 
     float: none; 
     width: -webkit-calc(100% - (#{$spacing-unit}/2)); 
     width:   calc(100% - (#{$spacing-unit}/2)); 
    } 
} 



/** 
* Page content 
*/ 
.page-content { 
    padding: $spacing-unit 0; 
} 

.page-heading { 
    font-size: 20px; 
} 

.post-list { 
    margin-left: 0; 
    list-style: none; 

    > li { 
     margin-bottom: $spacing-unit; 
    } 
} 

.post-meta { 
    font-size: $small-font-size; 
    color: $grey-color; 
} 

.post-link { 
    display: block; 
    font-size: 24px; 
} 



/** 
* Posts 
*/ 
.post-header { 
    margin-bottom: $spacing-unit; 
} 

.post-title { 
    font-size: 42px; 
    letter-spacing: -1px; 
    line-height: 1; 

    @include media-query($on-laptop) { 
     font-size: 36px; 
    } 
} 

.post-content { 
    margin-bottom: $spacing-unit; 

    h2 { 
     font-size: 32px; 

     @include media-query($on-laptop) { 
      font-size: 28px; 
     } 
    } 

    h3 { 
     font-size: 26px; 

     @include media-query($on-laptop) { 
      font-size: 22px; 
     } 
    } 

    h4 { 
     font-size: 20px; 

     @include media-query($on-laptop) { 
      font-size: 18px; 
     } 
    } 
} 

Answer 1

Look at this, with relative path to site root in default Jekyl site css/main.scss. 저기 그들이있어. 모든 정의, 수입 및 처리 후, css/main.css 결과 사이트에있을 것입니다.

_sass의 모든 내용은 개의 실제 자산을 CSS로 변환하기위한 것입니다. _sass의 Sass/SCSS 파일과 다른 곳의 차이점은 _sass의 파일이 직접 컴파일되지는 않지만 파일이있는 위치에 놓이고 가져 오기를 기다리는 것입니다. 재사용 할 수있는 모든 Sass 부분은 _sass이어야합니다. Sass 부분과 전체 시스템이 설계된 부분입니다. 많은 Sass 라이브러리 (like I do, and it's still a mess)를 사용하고 자산에 삽입하기 위해 수정하지 않으려는 경우 특히 유용합니다.

모든 다른 파일 (되지 _sass에서), 그러나 *.css 파일 대응으로 처리되고, 처리 된 파일들을 구별하기 위해, 지킬 프런트 물질 일반적 비어 YAML를 그러한 파일이 필요.

--- --- // Sass code here 

는 (지금은 아무 소용이 자산 비어 그래서 지금, YFM을 말대꾸에서 변수를 삽입하기위한 액체를 사용하는 데 사용하지만, that feature vanished after some updates).