CSS preprocessor là gì?

CSS preprocessor là một chương trình máy tính cho phép các nhà thiết kế viết hướng dẫn tạo style theo cú pháp dễ dàng và phong phú hơn cú pháp được cung cấp bởi CSS chuẩn. Các tính năng phổ biến do CSS preprocessor cung cấp bao gồm "nested rule", "mixin", "variable" , "place hoder" và "function". Các hướng dẫn được viết bằng cú pháp thay thế của CSS preprocessor trước được chương trình chuyển đổi (biên dịch) thành CSS chuẩn. Hai CSS preprocessor nổi tiếng nhất được gọi là SASS và LESS. SASS và LESS cung cấp các cú pháp khác nhau để viết hướng dẫn tạo style nhưng cả cú pháp chúng sử dụng đều khá giống nhau.

Ví dụ bên dưới là nested rule trong SASS.

// Nested Rules - SCSS
    div.container {
        div.child {
            a {
                color: red;
                font-size: 30px;
                font-weight: 400;
            }
        }

        p {
            color: green;
            font-size: 15px;
            border: 2px solid gray;
        }
    }

File CSS sau khi biên dịch SASS

div.container div.child a {
      color: red;
      font-size: 30px;
      font-weight: 400;
}
div.container p {
      color: green;
      font-size: 15px;
      border: 2px solid gray;
}