Trong bài trước chúng ta đã làm quen với SASS một công cụ hỗ trợ khiến việc viết CSS trở nên dễ dàng hơn. Nhưng chính vì cú pháp quá ngắn gọn nên việc đọc và viết SASS trở nên khó khăn hơn. Vì vậy SCSS ra đời nhằm bổ khuyết nhược điểm của SASS

SCSS syntax là gì?

SCSS hay Sassy CSS là 1 CSS Prepocessor nhằm thu hẹp khoảng cách giữa Sass và CSS bằng cách mang tới một cú pháp thân thiện với CSS.

Cú pháp của SCSS dựa trên cú pháp của CSS, bắt đầu sử dụng {} và ; như CSS, không còn quá quan trọng việc thụt lề hay các khoảng trắng.

Vì là bản cập nhật sau, nó tập hợp những thứ tốt nhất của đàn anh đi trước. Những gì có trong CSS thì cũng có trong SCSS. Và quan trọng hơn, SCSS cũng sở hữu những tính năng tuyệt vời của SASS.

Và hãy cũng xem những ví dụ sau để thấy những tính năng của SASS được dùng như thế nào trong SCSS nhé:

Ví dụ một file CSS:

hinh-vuong {
    width: 100px;
    height: 100px;
    background-color:  blue;
    box-shadow: 1px 1px 1px 1px #bf0000;
 }
 .hinh-vuong .mau-chu {
    size: 14px;
    text-align: center;
 }
 .hinh-vuong .mau-chu .dong-1 {
    color: #bf0000;
    text-align: left;
 }

Quy tắc xếp chồng (Nested Rules)

Với quy tắc này, thay vì viết lại .hinh-vuong nhiều lần, bạn chỉ việc đặt .mau-chu và .dong-1 vào bên trong .hinh-vuong thôi.

.hinh-vuong {
    width: 100px;
    height: 100px;
    background-color: #b3b3b3;
    box-shadow: 1px 1px 1px 1px #bf0000;
    .mau-chu {
        size: 14px;
        text-align: center;
        .dong-1 {
            color: #bf0000;
            text-align: left;
        }
    }
}

Thấy giống giống code mình vẫn viết hàng ngày rồi chứ, vừa quen thuộc, vừa đỡ phải viết lại nhiều lần.

Sử dụng biến (Varibles)

Trong một trang web, có rất nhiều chỗ bạn muốn dùng chung một màu, nhưng bạn không thể nhớ nổi mã màu #xxxxxx. Giải pháp cho bạn là hãy đặt tên biến cho giá trị đó và chỉ cần nhớ tên biến ấy để sử dụng thôi, không cần nhớ mã 6 kí tự kia đâu

Viết câu trả lời

Drop Images

0 Bình luận