SASS에서 다른 파일의 클래스에서 상속 할 수 있습니까?

102

질문은 거의 모든 것을 말합니다.

예를 들어 Twitter Bootstrap 을 사용하는 경우 Bootstrap의 CSS 클래스에서 상속되는 자체 SASS 스타일 시트에 클래스를 정의 할 수 있습니까? 아니면 SASS의 상속은 단일 파일의 범위 내에서만 작동합니까?

css inheritance stylesheet sass

— 단 타오
소스

180

예! 있을 수있다.

모든 <button>요소가 Twitter Bootstrap의 기본 버튼.btn 에서 클래스 를 상속하도록하려면

당신의에서 styles.scss파일을 먼저 수입해야 할 것입니다 _bootstrap.scss:

@import "_bootstrap.scss";

그런 다음 가져 오기 아래 :

button { @extend .btn; }

— Agustibr
소스

나는 다른 답변이이 질문에 거의 대답했기 때문에 이것을하는 것에 대해 기분이 나쁘다 (나는 잠시 동안 다시 확인하는 것을 무시했다가 잊었다); 그러나 나는 당신의 대답이 가장 완전하기 때문에 받아들이고 있습니다. 즉, 전체 과정을 안내합니다. 감사!

— Dan Tao

4

이것은 다른 SCSS 파일에서만 작동합니까? CSS 파일로 이것을 할 수 없습니까?

— crush

1

@extend부트 스트랩 / 모든 프레임 워크와 함께 사용할 때는 예상대로 작동하지 않을 수 있으므로 주의하십시오 . 이 게시물에 설명 된대로 몇 가지 알아

— 두어야 할

2

그러나 프로젝트의 여러 파일에서 수행하면 bootstrap.scss의 CSS가 복제되지 않습니까?

— fritzmg

1

이것은 전체 bootstrap.css를 가져 오나요 styles.css아니면 그냥 가져 오나요 .btn? 출력 번들을 의미합니까? 전체를 가져 오면 불필요하게 bootstrap.css크기가 증가합니다 styles.css.

— maverick

8

** 착각 할 수도 있지만하려는 작업을 얻으면 @extend .classname;확장하려는 요소 내에서 명령을 사용할 수 없습니까? 당연히 업데이트 가능성을 유지하려면 자신의 코드 만 수정해야합니다.

— 마크 에른스트
소스

2

제가 알기로, 당신은 사용할 필요가@import 해당 파일을 이용하기 위해 사용자의 SASS 파일로 사용하고자하는 클래스를 포함하는 파일의. 그러나 나는 SASS / SCSS 전문가가 아니기 때문에 누군가 내가 알지 못하는 원격 사용 방법을 알고있을 수 있습니다.

— ScottS
소스

1

수락 된 답변이 @import로 가능하다는 것을 보여 주었 듯이 @import는 sass에 의해 더 이상 사용되지 않습니다.

Sass 팀은 @import 규칙의 지속적인 사용을 권장하지 않습니다. Sass는 향후 몇 년 동안 점차적으로이를 단계적으로 제거하고 결국 언어에서 완전히 제거 할 것입니다. 대신 @use 규칙을 선호하십시오.

@use 규칙은 가져 오기 (사용자) 모듈의 범위를 오염시키지 않기 때문에 지금 사용하기에 더 적합합니다. 불행히도 사용 규칙은 Dart sass에서만 구현되었습니다.

— 에합
소스