SCSS에서 스타일이 중복되지 않도록하려면 어떻게해야합니까?

Question

나머지 .scss 개의 파일에 대해 하나의 파일을 가진 .scss 파일을 갖고 싶습니다. 내가 그렇게한다면 그 .scss 스타일은 내 모든 .scss 파일에서 중복됩니다

global.scss - 나는 글로벌 사용할 - 내 전역 변수와 스타일

$white: #FFF; 
$black: #000; 
$bg_red: red; 

.mt30 { 
    margin-top: 30px; 
} 

이 header.scss 파일 vars 및 스타일이이 파일에 있습니다.

@include "global" 

.foo { 
    width: 100px; 
    height: 50px; 
    backgrounnd-color: $bg_red; 
} 

main.scss - 난 너무이 파일에 글로벌 바르과 스타일을 사용하고 싶습니다.

@include "global" 

.boo { 
    width: 100px; 
    height: 50px; 
    backgrounnd-color: $white; 
} 

그러나 각 최종 .css 파일 global.scss에서 스타일을 가지고있다. 그래서 내 페이지에 여러 개의 .mt30 스타일이 있습니다. 어떻게 피하는가?

Answer 1

예 : Foundation 프레임 워크에는 app.scss 파일이 있습니다. 먼저 settings을 가져오고 foundation을 수입합니다. 이 후에 앱 별 규칙을 추가 할 수 있습니다.

settings에는 모든 Foundation 구성 요소에 대한 설정이 포함되어 있으며 이로 인해 CSS가 부풀려지지 않습니다. foundation 파일에는 그리드, 버튼 등과 같은 개별 구성 요소에 대한 분리 된 가져 오기 집합이 들어 있습니다. 이러한 구성 요소는 이전에 가져온 settings 파일로 구성됩니다. CSS 파일 크기를 줄이기 위해 불필요한 구성 요소에 대한 가져 오기를 제거 할 수 있습니다.

사실 더 쉽게 액세스 할 수 있도록 사용자는 foundation 가져 오기를 제거하고 기본값으로 주석 처리 된 구성 요소의 개별 가져 오기로 바꿉니다.

Answer 2

은 당신이 사용할 수있는 일이있다, 그것은 수입 한 번있다 :

https://rubygems.org/gems/compass-import-once

사용

말대꾸 명령 줄을 사용하려면 :

sass -r 'compass/import-once/activate' ... 

으로 비 컴퍼스 환경에서 사용 가능 :

require 'compass/import-once/activate' 

이 여기에 대한 자세한 정보를 읽을 수 있습니다 : http://rubydoc.info/gems/compass-import-once/1.0.5/frames

Answer 3

이 문제가 스타일의 중복하지만, 라이브러리, 또는 구성 파일의 중복없는 것 같다. 이를 위해 필요한 것은 코드를 약간 다르게 구성하는 것입니다. 먼저 global.scss 파일의 이름을 변경하고 (다른 모든 부분도) 밑줄로 시작하여 _global.scss으로 시작하십시오. 그런 다음 app.scss과 같은 매니페스트 파일을 만듭니다. 그 안에는 _global.scss을 가져오고 다른 파일이 필요합니다. 다른 파일은 이제 app.scss에 액세스 할 수있는 모든 항목에 액세스 할 수 있습니다.

_global.SCS들

$white: #FFF; 
$black: #000; 
$bg_red: red; 

_header.scss

.foo { 
    width: 100px; 
    height: 50px; 
    background-color: $bg_red; 
} 

_main.scss

.mt30 { 
    margin-top: 30px; 
} 

.boo { 
    width: 100px; 
    height: 50px; 
    background-color: $white; 
} 

app.scss

012,322,

header와 main 앞에 global을 가져 오기 때문에, 후자의 두 사람은 이전에있는 것에 액세스 할 수 있습니다. 또한 주목해야 할 것은 하나의 선언 된 스타일 .mt30을 전역에서 기본 부분으로 이동 시켰으며, 이는 전역 설정 파일에서 어떤 스타일도 선언되지 않았 음을 확인하는 것입니다.