Sass @mixin และ @include

Sass Mixin

@mixin คำสั่งที่อนุญาตให้คุณสร้างรหัส CSS ที่สามารถใช้งานซ้ำได้ทั่วเว็บไซต์

สร้าง @include คำสั่งเพื่อให้คุณสามารถใช้ (ตั้งอย่าง) mixin。

defining Mixin

mixin คือที่ใช้ @mixin 指令定义的。

Sass @mixin 语法：

@mixin name {
  property: value;
  property: value;
  ...
{}

ตัวอย่างดังนี้สร้าง mixin ชื่อว่า "important-text":

การใช้งาน SCSS:

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px แบบตรง blue;
{}

คำเตือน:

คำเตือนเกี่ยวกับสัญญาณของ Sass และขีดใต้: สัญญาณและขีดใต้ถือว่าเป็นเดียวกัน。

นี่หมายความว่า @mixin important-text { } และ @mixin important_text { } ถือว่าเป็น mixin เดียวกัน!

ใช้ Mixin

@include คำสั่งใช้สำหรับอ้างอิง mixin。

กราฟิก Sass @include mixin:

selector {
  @include mixin-name;
{}

ดังนั้น หากต้องการรวม mixin important-text ที่สร้างขึ้นก่อนหน้านี้:

การใช้งาน SCSS:

.danger {
  @include important-text;
  background-color: green;
{}

Sass โทรงเล่นจะแปลรหัสเหล่านี้เป็น CSS ทั่วไป:

ออกเสียง CSS:

.danger {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px แบบตรง blue;
  background-color: green;
{}

Mixin ยังสามารถมี mixin อื่นด้วย:

การใช้งาน SCSS:

@mixin special-text {
  @include important-text;
  @include link;
  @include special-border;
{}

ส่งตัวแปรให้กับ Mixin

Mixins รับตัวแปร。ด้วยวิธีนี้ คุณสามารถส่งตัวแปรให้กับ mixin ได้。

ดังนั้น นี้เป็นวิธีที่จะกำหนด mixin ที่มีตัวอักษร:

การใช้งาน SCSS:

/* กำหนด mixin ที่มีสองตัวอักษร */
@mixin bordered($color, $width) {
  border: $width แบบตรง $color;
{}
.myArticle {
  @include bordered(blue, 1px);  // โรงหลัง mixin ที่มีค่าสองตัว
{}
.myNotes {
  @include bordered(red, 2px); // โรงหลัง mixin ที่มีค่าสองตัว
{}

โปรดทราบว่า ตัวแปรถูกตั้งค่าเป็นแปรและใช้เป็นค่าของขอบเขต (สีและความหนาของขอบเขต)。

หลังจากการปรับปรุง，CSS จะเป็นตัวอย่างดังนี้:

ออกเสียง CSS:

.myArticle {
  border: 1px แบบตรง blue;
{}
.myNotes {
  border: 2px แบบตรง red;
{}

ค่าปริยายของ Mixin

ยังสามารถกำหนดค่าปริยายสำหรับตัวแปร mixin ได้:

การใช้งาน SCSS:

@mixin bordered($color: blue, $width: 1px) {
  border: $width แบบตรง $color;
{}

จากนั้น คุณต้องการกำหนดค่าที่ต้องการเปลี่ยนในขณะที่เรียกมิกซิน:

การใช้งาน SCSS:

.myTips {
  @include bordered($color: orange);
{}

ใช้ Mixin แทนโซ่หน้าแรกของผู้จัดการ

โมกินยังเป็นการใช้งานที่ดีเช่นนี้ (บราวเซอร์) โซ่หน้าแรกของผู้จัดการ:

นี่คือตัวอย่างของการทดสอบโมกิน:

การใช้งาน SCSS:

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
{}
.myBox {
  @include transform(rotate(20deg));
{}

หลังจากการแปลงรูปแบบ การใช้งาน CSS จะดูเช่นนี้:

การใช้งาน CSS:

.myBox {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
{}