hướng dẫn sử dụng sass trung cấp 2

Sử dụng SASS trung cấp 2 – @extend và @mixin6 phút đọc

Sử dụng SASS trung cấp 2 là bài thứ ba trong chuỗi bài hướng dẫn sử dụng SASS trên blog của mình.Trong bài này mình sẽ tiếp tục giới thiệu đến các bạn cách sử dụng cũng như ý nghĩa của @mixin và @extend trong SASS.

Đây là hai chức năng thường xuyên được sử dụng trong SASS, đặc biệt là những dự án lớn.Bạn nên theo dõi cả những bài viết trước để hệ thống kiến thức tốt nhất cho việc học SASS.

Còn bây giờ chúng ta bắt đầu tìm hiểu ngay và luôn xem @extend @mixin là gì nhé !

Sử dụng SASS trung cấp 2 – @extend

Trong một dự án làm website khi viết CSS thì chắc chắn bạn sẽ gặp trường hợp mà một yếu tố nào đó có một phần code tương tự như một yếu tố đã có trước đó.

Thay vì viết lại toàn bộ phần code trùng lặp đó thì bạn có thể tái sử dụng nó bằng cách gọi @extend ra khi cần.Việc này được gọi là tính kế thừa trong viết code.

SCSS

Như ở ví dụ trên thì class .item1 có những thuộc tính và cách viết CSS thuần.Giờ class .item2 cũng có những thuộc tính giống hệt class .item1 chỉ khác là nó có thêm background: #e8e8e8; mà thôi.

Trong trường hợp này class .item2 sẽ kế thừa lại toàn bộ code của class .item1 bằng cách gọi một @extend bên trong phần code của class .item2.

Cách gọi một @extend rất đơn giản là bạn khai báo @extend và tiếp theo bạn gõ tên class mà yếu tố đó sẽ kế thừa là được.Như ở ví dụ trên thì để class .item2 kế thừa thuộc tính của class .item1 thì mình viết như sau : @extend .item1;

CSS

Sau khi biên dịch ra CSS thì ta có kết quả như trên.Bạn có thể thấy rằng cả hai class là .item1 và .item2 đều được khai báo chung cho một số thuộc tính.

Sử dụng SASS trung cấp 2 – @mixin

@extend chỉ giúp bạn kế thừa code của một yếu tố nào đó đã có trước đó mà thôi.Còn khi bạn có một đoạn code CSS nhưng muốn sử dụng đi sử dụng lại nhiều lần thì sao.

Khi đó ta cần sử dụng mixin.Bạn hay theo dõi ví dụ dưới đây để hiểu rõ cách sử dụng mixin nhé.

SCSS

Để khai báo một mixin thì bạn sử dụng cú pháp @mixin và ngay sau đó là tên của mixin do bạn tự đặt.Bên trong mixin này là đoạn code bạn sẽ tái sử dụng nhiều lần trong suốt dự án.

Như ở ví dụ trên thì mình khai báo mixin có tên button bằng cách gõ : @mixin button { thuộc tính } , bên trong mixin này là thuộc tính border-radius: 3px; background: #ccc; sẽ được mình sử dụng nhiều lần trong dự án.

Khi muốn sử dụng mixin này bạn hãy khai báo cú pháp @include tên_mixin bên trong yếu tố bạn muốn gọi mixin này ra.Ví dụ trên thì mình đã gọi mixin button đã khai báo trước đó trong class .button-normal và .button-submit.

CSS

Khi biên dịch ra CSS thì ta có kết quả như trên đây.Bạn thấy rằng mixin không hề được biên dịch ra trong file CSS mà chỉ khi nào nó được gọi ra bằng cú pháp @include thì nó mới được biên dịch mà thôi.

Phân biệt @extend và @mixin

Đến đây chắc nhiều bạn thắc mắc là vậy thì sự giống và khác nhau giữa @extend với @mixin là gì ? và phân biệt cách sử dụng giữa chúng như thế nào ?

Mình có tổng hợp lại như dưới đây trong quá trình mình sử dụng SASS để bạn tham khảo.

  • @extend : sử dụng khi một yếu tố cần kế thừa thuộc tính của một yếu tố đã có trước đó.Không cần khai báo mà chúng ta có thể gọi trực tiếp @extend kèm theo tên class sẽ kế thừa để sử dụng.Phạm vi sử dụng hẹp.
  • @mixin : sử dụng khi một đoạn code nào đó được tái sử dụng nhiều lần trong dự án.Phải khai báo @mixin để có thể sử dụng và gọi nó ra bằng @include.Code trong @mixin sẽ không được biên dịch ra trong file CSS.Phạm vi sử dụng rộng.

Sử dụng SASS trung cấp 2 – %name

Khi bạn muốn tái sử dụng lại một đoạn code CSS nào đó nhưng chỉ giới hạn trong một page duy nhất nên bạn không muốn khai báo mixin mà bạn lại không muốn nó được biên dịch ra CSS thì chỉ có lựa chọn duy nhất đó là sử dụng vùng chọn %name.

Vùng chọn %name có thể nói là trung gian giữa @extend và @mixin.

SCSS

Để sử dụng chức năng vùng chọn này thì bạn khai báo theo cú pháp %name với name ở đây là tên bất kì đại diện cho lớp code mà bạn muốn tái sử dụng.

Sau đó để sử dụng vùng chọn này thì bạn gọi nó ra bằng cú pháp @extend %name với name là tên vùng chọn bạn đã tạo ra trước đó.

Cách khai báo và gọi để sử dụng của nó khá giống với @mixin phải không nào.

CSS 

Nhìn vào code sau khi được biên dịch ra CSS thì ta có thể thấy khác hoàn toàn so với @extend.Không có thêm một class nào được khai báo thêm vào cả.

Kết luận

Trên đây là toàn bộ kiến thức của bài sử dụng SASS trung cấp 2 mà mình muốn giới thiệu đến các bạn.Bài này là một bài khá khó rồi nên bạn hãy thực hành ngay để hiểu rõ hơn nhé.

Khi viết bài này mình cũng đã mất nhiều thời gian để biên soạn sao cho đầy đủ ý mà vẫn dễ hiểu, hi vọng nó sẽ có ích cho các bạn trong quá trình tự học SASS.

 

 

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x