ใช้ @include vs @extend ใน Sass?

ใน Sass ฉันไม่สามารถแยกแยะความแตกต่างระหว่างการใช้@includeกับ mixin และการใช้@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;
}

ด้วย mixins คุณจะได้รับ 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 ไม่อนุญาตให้ใช้การขยายภายในแบบสอบถามสื่อ (และตัวอย่างที่เกี่ยวข้องจากลิงค์ด้านบนไม่ถูกต้อง) ในสถานการณ์ที่คุณต้องการขยายตามแบบสอบถามสื่อให้ใช้ mixin:

=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 ของเว็บเซิร์ฟเวอร์จะดูแลมัน

ป.ล. โปรดทราบว่าคุณสามารถประกาศคลาสตัวยึดตำแหน่งภายในแบบสอบถามสื่อ

อัปเดต 2014-12-28 : ขยายการสร้าง CSS ที่กะทัดรัดกว่าที่มิกซ์อินทำได้ แต่ประโยชน์นี้จะลดลงเมื่อ CSS ถูก gzipped หากเซิร์ฟเวอร์ของคุณให้บริการ CSS แบบ gzipped (มันควรจะเป็นจริง!) การขยายนั้นแทบจะไม่มีประโยชน์ คุณจึงสามารถใช้มิกซ์อินได้ตลอดเวลา! เพิ่มเติมเกี่ยวกับเรื่องนี้ที่นี่: http://www.sitepoint.com/sass-extend-nobody-told-you/

แนวทางที่ดีคือการใช้ทั้งสองอย่าง - สร้างมิกซ์อินที่จะช่วยให้คุณปรับแต่งได้มากมายจากนั้นขยายสำหรับการกำหนดค่าทั่วไปของมิกซ์อินนั้น ตัวอย่างเช่น (SCSS Syntax):

@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 ใช้ได้อย่างสมบูรณ์ตราบเท่าที่คุณไม่เคยใช้กับเบราว์เซอร์ใด ๆ ถ้าคุณทำมันก็จะฉีกสไตล์ทุกที่ที่คุณเคยใช้ ลองพึ่งมิกซ์อินแทนสิ!

ใช้มิกซ์อินหากยอมรับพารามิเตอร์โดยเอาต์พุตที่คอมไพล์จะเปลี่ยนไปตามสิ่งที่คุณส่งผ่านเข้าไป

@include opacity(0.1);

ใช้การขยาย (พร้อมตัวยึดตำแหน่ง) สำหรับบล็อกสไตล์ที่ทำซ้ำได้แบบคงที่

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

ฉันเห็นด้วยกับคำตอบก่อนหน้านี้โดย d4nyll มีข้อความเกี่ยวกับตัวเลือกการขยายและในขณะที่ฉันกำลังค้นคว้าธีมนี้ฉันพบข้อร้องเรียนมากมายเกี่ยวกับการขยายดังนั้นโปรดทราบว่าและหากมีความเป็นไปได้ที่จะใช้ mixin แทนการขยายให้ข้ามการขยาย