Sass에서 @include 대 @extend 사용?

Sass에서는 @includemixin과 @extend함께 사용 하는 것과 자리 표시 자 클래스 를 사용하는 것의 차이를 구분할 수 없습니다 . 그들은 같은 것에 해당하지 않습니까?

확장은 사용자 정의를 허용하지 않지만 매우 효율적인 CSS를 생성합니다.

%button
  background-color: lightgrey
  &:hover, &:active
    background-color: white

a
  @extend %button

button
  @extend %button

결과:

a, button {
  background-color: lightgrey;
}
a:hover, button:hover, a:active, button:active {
  background-color: white;
}

믹스 인을 사용하면 중복 된 CSS를 얻을 수 있지만 인수를 사용하여 각 용도에 대한 결과를 수정할 수 있습니다.

=button($main-color: lightgrey, $active-color: white)
  background-color: $main-color
  border: 1px solid black
  border-radius: 0.2em

  &:hover, &:active
    background-color: $active-color

a
  +button

button
  +button(pink, red)

결과 :

a {
  background-color: lightgrey;
  border: 1px solid black;
  border-radius: 0.2em;
}
a:hover, a:active {
  background-color: white;
}

button {
  background-color: pink;
  border: 1px solid black;
  border-radius: 0.2em;
}
button:hover, button:active {
  background-color: red;
}

확장 및 믹스 인을 효과적으로 사용하여 코드를 더 깨끗하고 유지 관리 할 수있게 만드는 방법을 보려면 다음 일련의 코드 예제를 따르십시오. http://thecodingdesigner.com/posts/balancing

SASS는 안타깝게도 미디어 쿼리 내부 확장 사용을 허용하지 않습니다 (위 링크의 해당 예제는 잘못됨). 미디어 쿼리를 기반으로 확장해야하는 상황에서는 믹스 인을 사용하세요.

=active
  display: block
  background-color: pink

%active
  +active

#main-menu
  @extend %active // Active by default

#secondary-menu
  @media (min-width: 20em)
    +active // Active only on wide screens

결과:

#main-menu {
  display: block;
  background-color: pink;
}

@media (min-width: 20em) {
  #secondary-menu {
    display: block;
    background-color: pink;
  }
}

이 경우 중복은 불가피하지만 웹 서버의 gzip 압축이 처리하므로 너무 신경 쓰지 않아도됩니다.

PS 미디어 쿼리 내에서 자리 표시 자 클래스를 선언 할 수 있습니다.

업데이트 2014-12-28 : Extends 는 믹스 인보다 더 컴팩트 한 CSS를 생성 하지만 CSS를 gzip으로 압축하면이 이점이 줄어 듭니다. 서버가 gzip으로 압축 된 CSS를 제공하는 경우 (정말 그래야합니다!), extends 는 거의 도움이되지 않습니다. 따라서 항상 믹스 인을 사용할 수 있습니다 ! 여기에 대한 자세한 내용 : http://www.sitepoint.com/sass-extend-nobody-told-you/

좋은 접근 방식은 두 가지를 모두 사용하는 것입니다. 많은 사용자 정의를 허용하는 믹스 인을 만든 다음 해당 믹스 인의 일반적인 구성을 확장 할 수 있습니다. 예 : (SCSS 구문) :

@mixin my-button($size: 15, $color: red) {
  @include inline-block;
  @include border-radius(5px);
  font-size: $size + px;
  background-color: $color;
}
%button {
  @include my-button;
}
%alt-button {
  @include my-button(15, green);
}
%big-button {
  @include my-button(25);
}

이렇게하면 마이 버튼 믹스 인을 반복해서 호출하지 않아도됩니다. 또한 공통 버튼에 대한 설정을 기억할 필요가 없지만 선택하면 매우 고유 한 일회용 버튼을 만들 수 있습니다.

얼마 전에 작성한 블로그 게시물 에서이 예제를 가져 왔습니다. 도움이 되었기를 바랍니다.

내 의견으로는 확장은 순수한 악이므로 피해야합니다. 그 이유는 다음과 같습니다.

scss가 주어지면 :

%mystyle {color: blue;}
.mystyle-class {@extend %mystyle}
//basically anything not understood by target browser (such as :last-child in IE8):
::-webkit-input-placeholder {@extend %mystyle}

다음 CSS가 생성됩니다.

.mystyle-class, ::-webkit-input-placeholder { //invalid in non-webkit browsers
  color: blue;
}

브라우저가 선택자를 이해하지 못하면 전체 선택자 라인을 무효화합니다. 이것은 귀중한 mystyle-class가 더 이상 파란색이 아님을 의미합니다 (많은 브라우저에서). 이것이 정말로 무엇을 의미합니까? 브라우저가 선택기를 이해하지 못하는 경우 언제든지 확장을 사용하면 확장의 다른 모든 사용이 무효화됩니다. 이 동작은 또한 나쁜 중첩을 허용합니다.

%mystyle {color: blue;}
@mixin mystyle-mixin {@extend %mystyle; height: 0;}
::-webkit-input-placeholder {@include mystyle-mixin} 
//you thought nesting in a mixin would make it safe?
.mystyle-class {@extend %mystyle;}

결과:

::-webkit-input-placeholder, .mystyle-class { //invalid in non-webkit browsers
  color: blue;
}

::-webkit-input-placeholder {
  height: 0;
}

Tl; dr : @extend는 브라우저 특정 선택기와 함께 사용하지 않는 한 완벽하게 괜찮습니다. 그렇게하면 사용했던 스타일이 갑자기 무너질 것입니다. 대신 믹스 인에 의존하십시오!

매개 변수를 허용하는 경우 mixin을 사용하십시오. 여기서 전달하는 내용에 따라 컴파일 된 출력이 변경됩니다.

@include opacity(0.1);

반복 가능한 정적 스타일 블록에 대해 확장 (자리 표시 자 포함)을 사용 합니다.

color: blue;
font-weight: bold;
font-size: 2em;

나는 d4nyll의 이전 답변에 전적으로 동의합니다. 이 텍스트 옵션을 확장 약은 내가이 주제를 연구하는 동안 나는 불만이 많이 약, 확장 그래서 그냥과 믹스 인 사용 대신에 확장 할 수있는 가능성이있는 경우, 다만 건너 연장 있다는 사실이 발견했다.