Tất cả các tuỳ chỉnh nâng cao CSS/SCSS cần yêu cầu kỹ năng hiểu biết về CSS ở mức tối thiểu. Chúng tôi cũng cố gắng có nhiều bài viết hướng dẫn tại chuyên mục: Tuỳ chỉnh giao diện với CSS để bạn có thể học nhanh hoặc đơn giản chỉ cần Sao chép và Dán vào ứng dụng.
Hướng dẫn dưới đây giúp bạn tuỳ chỉnh nâng cao tại bước 2: Màu sắc. Cho phép bạn tùy chỉnh ứng dụng của bạn hoàn hảo hơn với CSS / SCSS.
Bạn cần đi tới TAB Màu sắc, kéo xuống dưới cùng để mở Tuỳ chọn CSS/SCSS như hình ảnh dưới đây:
CSS là gì?
CSS là một ngôn ngữ lập trình (đơn giản nhất) để định dạng và hình thành một trang. Nó là viết tắt của Cascading Style Sheet và xác định cách các yếu tố HTML5 được hiển thị. Bạn có thể tham khảo thêm về CSS tại đây.
SCSS là gì?
SCSS là một superset của CSS3. Cung cấp nhiều lựa chọn hơn CSS bằng cách sử dụng quy tắc lồng nhau, các biến, mixins, selector thừa kế, và nhiều hơn nữa.
Ví dụ dưới đây cho bạn thấy hai cách sử dụng CSS và SCSS:
Với CSS:
#body {
margin: 0;
border: 1px solid red;
}
#body p {
font-size: 13px;
font-weight: bold;
color: yellow;
}
#body h {
text-transform: capitalize;
}
Với SCSS:
$colorYellow: yellow;
#body {
margin: 0;
border: 1px solid $colorYellow;
p {
color: $colorYellow;
font: {
size: 13px;
weight: bold;
}
}
h {
text-transform;
}
}
Sự khác biệt giữa CSS và SCSS là gì?
1. Nếu bạn nhìn vào đoạn code trên bạn có thể thấy có một biến
$colorYellow: yellow;Và biến này được CSS gọi trong chính nó như một giá trị của thuộc tính “color”, hãy xem:
color: $colorYellow;
Như vậy bạn có thể gọi một biến trong CSS của bạn, và sau đó bạn sẽ chỉ làm việc trên các giá trị của biến này để thay đổi giá trị của tất cả các tuỳ chọn sử dụng biến này. Sự khác biệt với CSS cũ là bạn sẽ phải thay đổi giá trị các tuỳ chọn cho mỗi bộ chọn chứ không phải là thay đổi nó một lần cho tất cả các bộ chọn.
2. Nếu bạn so sánh hai đoạn code trên, cả hai đều có 3 selectors, hai trong số đó là selector phụ của selector chính. Trong SCSS những selector phụ có thể được lồng trong các selector chính. Nó làm cho code dễ đọc, viết và duy trì. Vì vậy, nếu bạn viết trong CSS là:
#body {
margin: 0;
}
#body p {
font-size: 12px;
}
thì trong SCSS bạn sẽ viết là:
#body {
margin: 0;
p {
color: $colorYellow;
font-size: 12px;
}
}
3. Bạn có thể nhận thấy có sự giống nhau khi các đoạn code phân chia thành các selector chính và selector phụ. Ví dụ, trong SCSS
font-weighttrở thành selector phụ của selector chính “font” trong CSS:
#body p {
font-size: 13px;
font-weight: bold;
}
trong SCSS:
#body p {
font {
size: 13px;
weight: bold;
}
}