SCSS (Sassy CSS) và Less là những bộ tiền xử lý CSS (CSS Preprocessors) mạnh mẽ, giúp giải quyết các hạn chế của CSS thuần túy. Vì CSS vốn dĩ chỉ là ngôn ngữ đánh dấu, nó thiếu đi các khái niệm logic như biến, hàm hay cấu trúc lồng nhau. SCSS cung cấp các tính năng này để giúp mã nguồn CSS trở nên linh hoạt, dễ bảo trì và giảm thiểu việc lặp lại mã (DRY - Don't Repeat Yourself).

1. Tích hợp SCSS vào dự án Vue.js

Để bắt đầu sử dụng SCSS trong Vue, bạn cần cài đặt các gói phụ thuộc cần thiết. Hiện nay, sass (thay thế cho node-sass đã lỗi thời) là lựa chọn phổ biến nhất.

npm install sass sass-loader --save-dev

Sau khi cài đặt, bạn có thể sử dụng SCSS trực tiếp trong các component Vue bằng cách khai báo thuộc tính lang="scss" trong thẻ style:

<style lang="scss" scoped>
/* Viết mã SCSS tại đây */
</style>

Lưu ý: Đối với các dự án sử dụng Vue CLI hoặc Vite, vue-loader sẽ tự động nhận diện và xử lý mã SCSS mà không cần cấu hình thêm trong webpack.

2. Các cú pháp SCSS quan trọng

Khai báo biến và lồng mã (Nesting)

Biến giúp bạn quản lý các giá trị dùng chung như mã màu, kích thước font một cách tập trung. Cấu trúc lồng nhau giúp mô phỏng cây phân cấp của HTML, làm cho mã nguồn dễ đọc hơn.

$theme-color: #3498db;
$base-spacing: 15px;
$side: left;

.container-box {
    background-color: $theme-color;
    padding: $base-spacing;
    border-#{$side}: 4px solid darken($theme-color, 10%);

    .title-text {
        font-weight: bold;
        color: white;
        
        span {
            font-style: italic;
        }
    }
}

Phép toán và Kế thừa (Inheritance)

SCSS cho phép thực hiện các phép tính trực tiếp trên đơn vị CSS và kế thừa các thuộc tính từ một lớp khác để tránh lặp mã.

.base-button {
    padding: 10px 20px;
    border-radius: 4px;
    display: inline-block;
}

.submit-btn {
    @extend .base-button;
    $factor: 2;
    width: 50px * $factor;
    height: 20px + 15px;
    border: (1px + 1px) solid #333;
    background-color: green;
}

Sử dụng Mixin để tái sử dụng mã

Mixin giống như một hàm trong lập trình, cho phép bạn đóng gói các khối code CSS và truyền tham số khi cần thiết.

@mixin flex-center($direction: row) {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: $direction;
}

.header-wrapper {
    @include flex-center(column);
    height: 100px;
    background: #f4f4f4;
}

Cấu trúc điều kiện (If/Else)

Bạn có thể thay đổi thuộc tính dựa trên logic hoặc giá trị của biến.

$mode: "dark";

.card {
    @if $mode == "dark" {
        background: #222;
        color: #fff;
    } @else {
        background: #fff;
        color: #222;
    }
}

Vòng lặp trong SCSS

Vòng lặp rất hữu ích khi bạn cần tạo ra một loạt các class có cấu trúc tương tự nhau như hệ thống lưới (grid) hoặc các mức độ kích thước.

@for $index from 1 through 4 {
    .margin-top-#{$index} {
        margin-top: $index * 10px;
    }
}
/* Kết quả sẽ tạo ra các class .margin-top-1, .margin-top-2... */

Hàm tùy chỉnh (Functions)

Khác với Mixin dùng để trả về các thuộc tính CSS, Function được dùng để tính toán và trả về một giá trị duy nhất.

@function calculate-rem($pixel) {
    @return $pixel / 16px * 1rem;
}

.article-content {
    font-size: calculate-rem(32px);
    line-height: 1.5;
}