import {Meta} from '@storybook/addon-docs/blocks'

<Meta title='@dxtmisha/vi/# UI/properties/! Về properties.json'/>

# Cấu hình (properties.json)

Tệp `properties.json` là bản tuyên ngôn khai báo cho thành phần của bạn. Trong đó, bạn mô tả cấu trúc, kiểu dáng, trạng thái và tham số, sau đó chúng sẽ tự động được chuyển đổi thành mã SCSS hoàn chỉnh và các giao diện TypeScript có kiểu dữ liệu (`props.ts`).

## Làm thế nào để làm việc với tệp này?

Thay vì viết hàng trăm dòng CSS thủ công cho mọi pseudo-class hoặc media query, bạn điền vào một **cây thuộc tính**. Hệ thống phân tích tệp này và thực hiện mọi công việc lặp đi lặp lại:
- **Tạo kiểu dáng (SCSS)**: Tạo ra các lớp theo phương pháp BEM, các biến và chủ đề.
- **Tạo giao diện (Props)**: Hình thành các thuộc tính thành phần công khai cho Vue/React.
- **Đồng bộ hóa**: Đảm bảo rằng các kiểu dáng và giao diện lập trình luôn tương ứng với nhau.

## Khái niệm cốt lõi

1.  **Token**: Các nút cấp độ JSON mô tả thuộc tính CSS cụ thể hoặc các đối tượng lồng nhau.
2.  **Loại và Cờ (_type, _var...)**: Các tham số dịch vụ xác định logic xử lý nút (tạo biến, trạng thái hoặc xuất ra Props).
3.  **Liên kết (Links)**: Hệ thống `{...}` cho phép kế thừa giá trị từ các token khác hoặc các biến thiết kế toàn cục.
4.  **Dấu hiệu và Phím tắt**: Các tiền tố đặc biệt (`~`, `group|`) và các trình giữ chỗ liên kết (`?`, `??`) giúp tăng tốc độ viết các cấu hình phức tạp.
