Phép nội suy biến trong Sass

Trong lập trình, khi bạn muốn truyền giá trị của biến vào một chuỗi string, chúng ta sử dụng khái niệm nội suy. Trong Sass cũng vậy, có những trường hợp chúng ta cần đưa giá trị của biến vào trong một chuỗi string như giá trị của thuộc tính CSS hay một Selector name

Cú pháp nội suy

/* syntax for interpolation */
#{}
/* anything inside will be evaluated */

Ví dụ

@mixin corner-icon($name) {
  /* using interpolation */
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
  }
}

/* calling the above mixin */
@include corner-icon("mail");

Kết quả sau compiled

.icon-mail {
  background-image: url("/icons/mail.svg");
}

Tổng kết

Bài này chỉ đơn giản như vậy thôi, hy vọng qua ví dụ trên các bạn biết sử dụng tính nội suy trong Sass và ứng dụng nó hiệu quả vào trong dự án của mình. Việc sử dụng nội suy chắc chắn sẽ giúp ích rất nhiều trong việc tối ưu code của bạn.

Thanks for reading!