Cách sử dụng MIXIN, EXTEND và PLACEHOLDER trong SASS

15/02/2020

3379

Viết CSS với SASS / SCSS, ngay cả khi sử dụng các tính năng cơ bản nhất của nó, như các thuộc tính lồng nhau hoặc biến cũng tiết kiệm rất nhiều thời gian và công sức cho các lập trình viên Front end.

Cũng không có gì ngạc nhiên khi các bộ xử lý CSS (CSS Pre-processor) được coi là cách làm thực tế của “CSS”.

Trong bài hướng dẫn SASS / SCSS này, chúng ta sẽ tìm hiểu cách sử dụng:

@mixins
@extend
palaceholder
và phân biệt sự khác nhau giữa chúng.

*Cách sử dụng MIXIN, EXTEND và PLACEHOLDER trong SASS*

1. Cách sử dụng @mixin trong SASS / SCSS

Một số điều trong CSS hơi tẻ nhạt, đặc biệt là với CSS3.

Nếu bạn không thích, một @mixin cho phép bạn tạo các nhóm khai báo CSS mà bạn muốn sử dụng lại trên toàn bộ trang web của mình.

Bạn thậm chí có thể chuyển các giá trị để làm cho mixin của bạn linh hoạt hơn.

Để tạo một mixin, bạn sử dụng lệnh @mixin và đặt tên cho nó.

Như cách chúng ta đã đặt tên mixin size bên dưới.

Chúng ta cũng đang sử dụng biến $width, $height bên trong dấu ngoặc đơn để chúng ta có thể chuyển đổi bất kỳ thứ gì chúng ta muốn.

Sau khi bạn tạo mixin của mình, bạn có thể sử dụng nó làm khai báo CSS bắt đầu bằng @include theo sau là tên của mixin.

@mixin size($width: 100%, $height: 100%) {
  width: $width;
  height: $height;  
}

.img-fluid{
	@include size();
}

.avatar{
	@include size(50px, 50px);
}

.avatar-lg{
	@include size(60px, 60px);
}

Đây là kết quả sau khi compiler:

.img-fluid{
	width: 100%;
	height: 100%;
}

.avatar{
	width: 50px;
	height: 50px;
}

.avatar-lg{
	width: 60px;
	height: 60px;
}

2. Cách sử dụng @extend trong SASS / SCSS

Extend có nghĩa là mở rộng. Ở đây có nghĩa là thay vì viết lại các thuộc tính trùng lặp, bạn có thể mở rộng từ nó.

Ví dụ bên dưới đây, chúng ta chỉ muốn thêm background-color: green cho avatar khi người dùng online hoặc red khi người dùng bận.

Vậy, thay vì viết riêng cho từng .avatar-online và .avatar-busy thì chúng ta sẽ tạo .avatar-status để chứa các thuộc tính chung.

Sau đó, chúng ta sẽ mở rộng (@extend) từ .avatar-status cho
.avatar-online và .avatar-busy

Cụ thể như ví dụ bên dưới:

.avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend .avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend .avatar-status;
  &:before {
    background-color: red;
  }
}

Kết quả trong CSS là:

.avatar-status:before, .avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

Đây là một trong những tính năng hữu ích nhất của Sass. Nó cho phép bạn chia sẻ một tập hợp các thuộc tính CSS từ Selector này sang Selector khác.

Đọc thêm: 8 Loại CSS Selector cần thiết nhất

Đoạn code cuối cùng vẫn chưa hoàn hảo. Đó là bởi vì lớp .avatar-status cũng được ghi trong tệp .css cuối cùng.

Và vì lớp .avatar-status chỉ được tạo ra để cho lớp khác kế thừa.

Thế nên, có thể nó sẽ không được sử dụng đến.

Do đó, tốt hơn hết là ẩn nó đi.

Để đạt được điều này, bạn có thể sử dụng placehodler

3. Cách sử dụng placeholder trong SASS / SCSS

Vẫn sử dụng ví dụ bên trên.

Nhưng ở đây, mình đã thêm một chút thủ thuật (rất đơn giản :D)

%avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend %avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend %avatar-status;
  &:before {
    background-color: red;
  }
}

Kết quả trong CSS:

.avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

Bạn có thể mở rộng hầu hết các CSS Selector đơn giản ngoài các lớp placeholder trong Sass.

Nhưng, sử dụng placeholder là cách dễ nhất để đảm bảo bạn không mở rộng một lớp được lồng ở nơi khác, điều này có thể dẫn đến các bộ chọn ngoài ý muốn trong CSS của bạn.

Để làm điều này, bạn chỉ cần thêm %avatar-status thay vì .avatar-status

Lưu ý rằng CSS %avatar-status không được tạo, vì %status-status không bao giờ được mở rộng.