Điểm Khác Biệt Giữa Mixins, Extends Và Placeholders Trong SASS

Điểm khác biệt giữa Mixins, Extends và Placeholders, chỉ gói gọn trong cách hiện thị mã css lúc được render ra. Bạn xem các ví dụ ở bên dưới

1. Mixins: (@minxin)
   – Khai báo: @mixin mixin_name
   – Sử dụng: @include mixin_name

   @mixin awesome {
       width: 100%;
       height: 100%;
   }
   
   body {
       @include awesome;
   }
   p {
       @include awesome;
   }

   Mã css được in ra

   body {
       width: 100%;
       height: 100%;
   }
   p {
       width: 100%;
       height: 100%;
   }

   Nghĩa là khi sài mixins thì mã css được in ra sẽ bao gồm các thuộc tính mà nó được thêm vào,  nó không xử lý việc đoạn mã css bị trùng lặp nhiều.

2. Extends: (@extend )
   – Khai báo: .extend_name
   – Sử dụng: @extend .extend_name

   .awesome {
       width: 100%;
       height: 100%;
   }
   
   body {
       @extend .awesome;
   }
   p {
       @extend .awesome;
   }

   Đoạn mã css được in ra

   awesome, body, p {
       width: 100%;
       height: 100%;
   }

   cũng giống như mixins nhưng kết quả mã css đã xử lý được đoạn mã trùng gôm chung lại, làm cho mã css gọn, nhẹ hơn.

3. Placeholders: (@extend %placeholder)
   – Khai báo: %placeholder_name
   – Sử dụng: @extend %placeholder_name

   %awesome {
       width: 100%;
       height: 100%;
   }
   body {
       @extend %awesome;
   }
   p {
       @extend %awesome;
   }

   Giống với extends nhưng mà đoạn mã css in ra sẽ vừa loại bỏ mã trùng, vừa loại bỏ được %placeholder khỏi mã code css được biên dịch ra, làm cho mã code css tinh gọn extends