Xin chào các bạn đã trỡ lại với series SASS/SCSS. Hôm nay, mình sẽ giới thiệu cho các về Placeholder Selector. Nó gần giống như một class cả về cách khai báo và hoạt động, nhưng nó bắt đầu bằng ký tự “%” và nó sẽ không được compile ra CSS output.

SCSS
CSS

Vậy nếu không được compile thì tác dụng của Placeholder Selector là gì ? Và nó được sử dụng như thế nào ?

Placeholder Selector có thể được sử dụng để kế thừa, nó sẽ không được compile thành CSS nếu nó không được kế thừa lại. Điều đó khiến co Placeholder Selector trở thành một bộ thư viện style để tái sử dụng. ví dụ, khi ta style element button, ta muốn nó có các thuộc tính mặc định như background, color…Ta chỉ cần tạo một Placeholder Selector và cho element button mà ta đang muốn style kế thừa nó. Điều này có thể giúp ta sử dụng các bộ thư viện chung cho các element mà không cần thêm 1 class đặc tả riêng cho nó. 

SCSS
CSS

Từ những điều trên, ta có thể thấy được, Placeholder Selector thường được sử dụng để viết các thư viện Style. Nếu ta sử dụng đến thì nó sẽ được compile ra CSS, nếu không nó sẽ chỉ được lưu trữ ở tập tin SCSS mà không compile thành CSS. Như vậy, ta vẫn có thể lưu trữ lại các thư viện style này để sử dụng lại mà không lo vấn đề phình to của các file CSS.

Trong bài viết này và các bài viết trước, mình đã giới thiệu cho các bạn các style rules của SASS/SCSS. Hãy đọc thật kỹ và tự mình trải nghiệm các style rules này nhé. Nếu được sử dụng hợp lý và thông minh các style rules này thì code của bạn sẽ trở nên rất linh động và giảm thiểu được lượng code CSS được compile ra đấy. Trong bài tới, mình sẽ đi sâu vào những thứ giúp cho SASS/SCSS trở nên mạnh mẽ trong việc quản lý và maintain code CSS.