Sass - Kiểu đầu ra

Trong chương này, chúng ta sẽ nghiên cứu về SASS Output Style. Tệp CSS mà SASS tạo ra bao gồm kiểu CSS mặc định, phản ánh cấu trúc của tài liệu. Kiểu CSS mặc định là tốt nhưng có thể không phù hợp với mọi trường hợp; mặt khác, SASS hỗ trợ nhiều phong cách khác.

Nó hỗ trợ các kiểu đầu ra khác nhau sau:

: lồng vào nhau

Kiểu lồng nhau là kiểu mặc định của SASS. Cách tạo kiểu này rất hữu ích khi bạn xử lý các tệp CSS lớn. Nó làm cho cấu trúc của tệp dễ đọc hơn và có thể dễ hiểu. Mỗi thuộc tính có một dòng riêng và thụt lề của mỗi quy tắc dựa trên độ sâu của nó.

Ví dụ, chúng ta có thể lồng mã trong tệp SASS như hình dưới đây:

#first {
   background-color: #00FFFF;
   color: #C0C0C0; 
}

#first p {
   width: 10em; 
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00; 
}

: mở rộng

Trong kiểu CSS mở rộng, mỗi thuộc tính và quy tắc có một dòng riêng. Nó chiếm nhiều dung lượng hơn so với kiểu CSS lồng nhau. Phần Quy tắc bao gồm các thuộc tính, tất cả đều nằm trong các quy tắc, trong khi các quy tắc không tuân theo bất kỳ thụt lề nào.

Ví dụ: chúng ta có thể mở rộng mã trong tệp SASS như hình dưới đây:

#first {
   background-color: #00FFFF;
   color: #C0C0C0;
}

#first p {
   width: 10em;
}

.highlight {
   text-decoration: underline;
   font-size: 5em;
   background-color: #FFFF00;
}

:gọn nhẹ

Kiểu CSS nhỏ gọn cạnh tranh chiếm ít không gian hơn so với Mở rộng và lồng nhau. Nó tập trung chủ yếu vào các bộ chọn hơn là các thuộc tính của nó. Mỗi bộ chọn chiếm một dòng và các thuộc tính của nó cũng được đặt trong cùng một dòng. Các quy tắc lồng nhau được đặt cạnh nhau mà không có dòng mới và các nhóm quy tắc riêng biệt sẽ có dòng mới giữa chúng.

Ví dụ: chúng ta có thể thu gọn mã trong tệp SASS như hình dưới đây:

#first { 
   background-color: #00FFFF; color: #C0C0C0; 
}

#first p { 
   width: 10em; 
}

.highlight { 
   text-decoration: underline; font-size: 5em; background-color: #FFFF00; 
}

: nén

Kiểu CSS nén chiếm ít dung lượng nhất so với tất cả các kiểu khác đã thảo luận ở trên. Nó chỉ cung cấp các khoảng trắng để tách các bộ chọn và dòng mới ở cuối tệp. Cách tạo kiểu này khó hiểu và không dễ đọc.

Ví dụ: chúng ta có thể nén mã trong tệp SASS như hình dưới đây:

#first { 
   background-color:#00FFFF;color:#C0C0C0
} 

#first p { 
   width:10em 
} 

.highlight { 
   text-decoration:underline;font-size:5em;background-color:#FFFF00 
}