Đ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
- Mixins: (@minxin)
– Khai báo: @mixin mixin_name
– Sử dụng: @include mixin_name
1234567891011@mixin awesome {width: 100%;height: 100%;}body {@include awesome;}p {@include awesome;}
Mã css được in ra
12345678body {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. - Extends: (@extend )
– Khai báo: .extend_name
– Sử dụng: @extend .extend_name
1234567891011.awesome {width: 100%;height: 100%;}body {@extend .awesome;}p {@extend .awesome;}
Đoạn mã css được in ra
1234awesome, 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. - Placeholders: (@extend %placeholder)
– Khai báo: %placeholder_name
– Sử dụng: @extend %placeholder_name
1234567891011%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