개별 파일에서 @extend를 사용하는 SASS/SCSS (응답 형 디자인)

Question

내 사이트에서 "모바일 우선"접근 방식을 사용하고 있으며 SCSS를 사용하고 있습니다.

나는 3 SCSS 스타일 시트가 있습니다

• base.scss
  가 (모두 제공)
• medium.scss (> = 768px 창)
• large.scss (> =가 1024px 창)

그들은이를 예 :

<link rel="stylesheet" href="/css/base.css" type="text/css" /> 
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" /> 
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" /> 

즉, large.scss은 base.scss에있는 CSS에 대한 지식이 없지만 large.scss에있는 base.css에있는 클래스를 확장해야합니다.

어떻게하면됩니까?

난 medium.scss에 @import 'buttons.scss';를 사용해서 별도의 스타일 시트로, 예를 들면 버튼으로 연장하고, 필요 요소를 분리하려했지만 다음 buttons.scss 모든 CSS뿐만 아니라 그 시트로 렌더링 될 것이다.

CSS를 media.scss에서 사용할 수 있도록 컴파일 할 때 SASS "렌더링 엔진"에 base.scss의 클래스를 표시 할 수있는 방법이 있습니까?

Answer 1

나는 최근에 비슷한 문제가있었습니다. 내 솔루션 : 믹스 인.

_mixins.scss

@mixin someSpacing($base: 5px;){ 
    padding: $base; 
    margin: $base; 
} 

것은 말대꾸 늘 그 파일을 컴파일, 접두사로 밑줄 사용해야합니다. 이제 간단하게 _mixins.scss 파일을 가져올 수 있습니다. 또한 매개 변수로 믹스 인을 확장하여 유연성을 높일 수 있습니다.

base.scss

@import '_mixins.scss'; 

    .classA { 
     @include someSpacing(3px); 
    } 

large.scss 말대꾸 기준에

@import '_mixins.scss'; 

    .anotherClass { 
     @include someSpacing(10px); 
    } 

자세한 내용은 : http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

Answer 2

은 나뿐만 아니라 한 번이 필요했습니다. 오늘 크리스 Eppstein 물어 그는 말했다 :

연장

그래 출력 파일 당 그래서

입니다. @include가 유일한 희망입니다.

Answer 3

올바른 방법은 모든 확장 가능한 선택기를 부분으로 저장하고 해당 부분을 출력 파일로 가져 오는 것입니다.

프로젝트/partials/_extendables.말대꾸

.foo 
    color: red 

%bar 
    width: 50px 

프로젝트/base.sass

@import partials/extendables 

.baz 
    @extend .foo 

프로젝트/medium.sass 또한

@import partials/extendables 

.quux 
    @extend %bar 

, 당신은 응답 전을 주관 사용하고있는 방법 무겁게 구식.

• 단일 출력 파일 : 당신이 IE의 일부 오래 된 녹슨 버전을 지원하도록 강요하지 않는 한, 당신은 현대적인 접근 방식을 사용해야합니다.
• 코드는 미디어 쿼리로 그룹화하지 않고 페이지 구성 요소 (메뉴, 뉴스 목록, 뉴스 항목 등) 및 기능 (고정 바닥 글 기술, 활판 인쇄)별로 ​​그룹화 된 여러 개의 작은 부분으로 구성되거나 페이지 (예 : 모든 헤더 코드, 모든 사이드 바 코드).

• 미디어 쿼리는 말대꾸 미디어 쿼리 버블 링 기능을 사용하여 현재 위치에서, 세부적으로 적용되어야한다 :

  프로젝트/파셜/구성 요소/_menu.sass

  .menu 
  
      @media (max-width: 600px) 
      // Mobile styles for menu container 
  
      @media (min-width: 601px) 
      // Desktop styles for menu container 
  
  
  .menu-item 
  
      @media (max-width: 600px) 
      // Mobile styles for menu items 
  
      @media (min-width: 601px) 
      // Desktop styles for menu items