Level up your Sass with the ampersand

Như mình đã từng giới thiệu về CSS Preprocessor ở bài viết CSS Preprocessor - SASS (SASS & SCSS. Ở bài viết đó mình đã giới thiệu một số khái niệm căn bản về SASS. Về phần Parent selector mình có giới thiệu qua công dụng của dấu & (ampersand) nhưng chỉ sơ qua và căn bản (vì lúc đó mình cũng chỉ biết được đến đó (yaoming)). Nhân tiện mình đọc được một bài viết khá hay với tiêu đề Level up your Sass with the ampersand nên mình sẽ dịch lại để chia sẻ với mọi người nhé. Bắt đầu nào.

Lần cuối cùng bạn viết CSS thuần là bao giờ? Nếu bạn là một front-end developer, hãy tưởng tượng sẽ khó khăn như thế nào nếu chúng ta không có các bộ CSS preprocessor với các chức năng mà chúng cung cấp cho chúng ta như: biến, function và cách tổ chức như chia file thành các phần khác nhau và được nhúng vào những nơi chúng ta cần hay việc lồng các selector?

Trong các bộ CSS preprocessor phổ biến hiện nay thì chỉ có SASS được coi là tốt nhất, nhưng với những gì chúng ta biết về nó thì chỉ là phần nổi của tảng băng chìm so với những gì mà nó có thể làm được. Một trong những tính năng được sử dụng nhiều nhất của SASS là khả năng lồng các rulesets trong các khối khai báo (declaration blocks) để biểu diễn một bộ chọn nhiều tầng (descendant selector) trong lúc biên dịch. Không chỉ có vậy, việc lồng các selector còn giúp chúng ta nhóm các kiểu (styles) lại với nhau để giúp bạn dễ hiểu hơn về việc chúng liên quan với nhau như thế nào do chúng được đặt cùng một vị trí (khối).

Trong SASS, ký hiệu & giống như một biến biểu diễn một parent selector. Kết hợp với việc lồng selector, dấu & còn cho phép chúng ta làm được nhiêu hơn thế nữa. Chúng ta cùng tìm hiểu nhé.

& pseudo-classes

Nếu bạn là một front-end developer, thì việc thường xuyên sử dụng dấu & trong SASS để lồng các lớp giả (class-pseudo) hay phần tử giả (element-pseudo) như a:hover hay div:before. Với dấu &, chúng ta có thể lồng các pseudo-class vào trong khối khai báo hiện tại giống như việc bạn đang làm với việc lồng các selector với nhau. Có nghĩa là nếu bạn đang trong một khối có 2 cấp chẳng hạn, thì dấu & sẽ biểu diễn đầy đủ bộ selector đó. Nghe có vẻ phức tạp, nhưng nó là một khái niệm khá quan trọng để chúng ta có thể hiểu về thằng & này. Bạn có thể xem ví dụ dưới đây cho trực quan nhé (yaoming):

.pagination {
  a {
    &:hover,
    &:focus {
      color: red;
    }
  }
}

// in this case, the & represents `.pagination a`, and will compile to:

.pagination a:hover, 
.pagination a:focus {
  color: red;
}

Như ví dụ trên, chúng ta thấy dấu & đang đại diện cho bộ selector .pagination a.

& concatenation

Như ví dụ ở trên, dấu & có thể gắn bản thân nó vào một selector khác. Nhưng không chỉ có vậy, nó còn có thể giúp chúng ta nối các tên class, ID, ... lại với nhau thay vì tạo thêm một selector con khác. Chúng ta cùng xem ví dụ để hiểu rõ hơn nhé:

.pagination {
  &-number {
    // & = .pagination-number
    &.is-current {
      border: 3px solid green;
    }
  }
  // & = .pagination
  &-prev {
    background-color: red;
    // & = .pagination-prev
    &:after {
      content: '<';
    }
  }
}

// which compiles to 

.pagination-number.is-current {
  border: 3px solid green;
}
.pagination-prev {
  background-color: red;
}
.pagination-prev:after {
  content: '<';
}

Như ví dụ trên, &-number sẽ được nối vào .pagination để thành .pagination-number mà không hề tạo ra class nào có tên .pagination. Thật kỳ diệu, phải không