Interpolation

Được dịch ra là “nội suy”, tên các thuộc tính có thể thêm các “nội suy” này giúp cho các thuộc tính trở nên linh hoạt hơn.

SCSS
CSS

Nesting

Style rules (quy tắc style) là nền tảng của của SASS cũng như CSS. Cả 2 hoạt động theo cùng một cách đó là ta chọn đến element mà ta muốn định hình bằng một bộ chọn (selector), sau đó ta khai báo các lệnh thuộc tính để định hình element đó theo như mong muốn của chúng ta.

SCSS muốn thực hiện việc này một cách dễ dàng hơn. Thay vì ta phải lặp đi lặp lại nhiều lần một bộ chọn (selector) để chọn ra được element mà ta muốn, ta có thể viết một bộ mã định hình này bên trong một bộ mã định hình khác. SCSS sẽ tự động kết hợp bộ mã định hình ở ngoài và trong để tạo ra được bộ mã CSS định hình cho các element mà ta mong muốn.

SCSS
CSS

Có rất nhiều thuộc tính CSS có cùng prefix như font-size, font-weight, font-family đều bắt đầu với prefix font-, vì vậy SCSS cho phép ta khai thác cấu trúc lồng nhau để giảm thiểu sự dư thừa và dễ dàng hơn khi viết code. Với cấu trúc lồng, tên thuộc tính ở bên ngoài sẽ được thêm vào bên trong, phân cách nhau bởi dấu “-“.

SCSS
CSS

Selector Lists

Quy tắc lồng (Nested rules) rất tốt và thông minh trong việc xử lý nhiều bộ chọn (Selector List), các bộ chọn được phân cách nhau bởi dấu phẩy. Mỗi bộ chọn được lồng riêng và sau đó được kết hợp vào lại thành một bộ chọn.

SCSS
CSS

Selector Combinators

Ta có thể đặt bộ tổ hợp lồng ở cuối của bộ selector bên ngoài hoặc bắt đầu của bộ selector bên trong.

SCSS
CSS

Hidden Declarations

Đôi khi chúng ta chỉ muốn show một số thuộc tính trong một số trường hợp cụ thể. Nếu ta tạo một thuộc tính có giá trị là null hoặc “” trình compiler SCSS sẽ không compile thuộc tính đó thành CSS.

SCSS
CSS

Tổng kết

Trong bài viết này, mình đã giới thiệu về các cấu trúc để khai báo các thuộc tính và cách mà nó hoạt động, các bạn hãy nắm thật kỹ các cấu trúc này nhé vì đây là phần cơ bản để ta có thể định hình được kết quả CSS mà ta mong muốn được compile ra như thế nào.