Chào mừng các bạn đã trở lại với series SASS/SCSS của mình. Trong bài viết này, mình sẽ giới thiệu với các bạn về Parent Selector, một Selector cực kỳ linh động và mạnh mẽ của SASS/SCSS.

Parent Selector

Là một Selector đặc biệt được tạo ra bới SASS/SCSS. Parent Selector, &, được sử dụng trong cấu trúc lồng (nested selector)  để ám chỉ bộ chọn ở phía ngoài. Nó khiến cho việc sử dụng lại bộ chọn bên ngoài theo nhiều cách phức tạp hơn như thêm 1 class phụ, pseudo-classes hoặc thêm 1 class trước bộ chọn hiện tại.  

SCSS
CSS

Adding Suffixes

Ta có thể sử dụng Parent Selector để thêm hậu tố bổ sung cho bộ chọn bên ngoài. Điều này sẽ cực kỳ hữu dụng khi ta sử dụng các cấu trúc đặt tên class nâng cao như BEM (mình sẽ giới thiệu về cấu trúc đặt tên này trong các bài sau)…Miễn là bộ chọn ngoài kết thúc bởi chữ cái và số ( như tên class, id, element selectors) thì ta có thể sử dụng parent selector để bổ sung text.

SCSS
CSS

sử dụng & với >, +, and ~

SCSS
CSS

Advanced Nesting

Ta có thể sử dụng & như một biểu thức SassScript, có nghĩa là ta có thể truyền nó vào các hàm hoặc include vào các phép nội suy (interpolation) cũng như trong các bộ selector khác. Sử dụng nó kết hợp với các selector function và @at-root có thể cho phép chúng ta sử dụng cơ chế lồng một cách rất mạnh mẽ.

Ví dụ, ta có 1 bộ chọn là .wrapper .field, nhưng selector này lại thuộc 2 element khác nhau là .wrapper input.field, .wrapper select.field và ta muốn style cho các bộ chọn này 1 các khác nhau. Ta có thể sử dụng kết hợp selector-unify() (sẽ nói rõ trong các bài sau) và & để đạt được mục đích mà ta mong muốn.

SCSS
CSS

Tới đây, mình đã giới thiệu xong cho các bạn về selector đặc biệt nhất của SASS/SCSS rồi. Parent Selector rất hữu dụng trong quá trình chúng ta viết code SASS/SCSS nên các bạn hãy nắm thật rõ về nó nhé. Các phần mình giới thiệu chỉ là những công dụng cơ bản nhất của nó mà thôi, trong quá trình sử dụng hãy tự mình trải nghiệm để thấy được sự tiện dụng của nó nhé.