Biên dịch scss thành css vscode

Sử dụng Sass hoặc Scss là một cách tuyệt vời để đơn giản hóa cách bạn viết css. Tuy nhiên, nó yêu cầu biên dịch thành css để có thể đọc được trong trình duyệt

Dưới đây là cách thiết lập tự động thu nhỏ, biên dịch và xuất tệp css thành đường dẫn mong muốn

Yêu cầu. Điều này giả sử bạn đang sử dụng VSCode

bước

1. Cài đặt tiện ích mở rộng VSCode Live Sass Compiler bằng cách chọn View + Extensions trong menu chính và tìm kiếm Live Sass Compiler
2. Tạo một thư mục .vscode ở thư mục gốc của dự án nếu nó chưa tồn tại
   • Tạo một tệp settings.json trong .vscode mới
3. Dán các cài đặt sau vào tệp .vscode/settings.json của bạn

Các cài đặt và cấu hình bổ sung được ghi lại ở đây trong repo Github

SASS là bộ tiền xử lý CSS bổ sung các tính năng đặc biệt như biến, vòng lặp và hàm vào CSS thông thường. Bạn có thể sử dụng SASS để viết CSS. Mục tiêu là làm cho quá trình viết mã đơn giản và có tổ chức hơn

SASS có hai phiên bản. . ngổ ngáo và. scss. Sự khác biệt chính giữa các phiên bản này là cú pháp. Một khi chúng tôi đã tạo ra của chúng tôi. ngổ ngáo hoặc. scss, chúng ta cần chuyển đổi chúng thành CSS tiêu chuẩn

Hướng dẫn này sẽ chỉ ra cách biên dịch SASS/SCSS của bạn thành CSS trong Visual Studio Code

Bước 1. Cài đặt tiện ích mở rộng trình biên dịch SASS trực tiếp

1. Chọn tab Tiện ích mở rộng từ thanh bên.
   Nhấp vào tab Tiện ích mở rộng từ thanh bên.
2. Tìm kiếm Trình biên dịch Sass trực tiếp trong hộp tìm kiếm.
   Tìm kiếm “Trình biên dịch Sass trực tiếp” từ hộp tìm kiếm.
3. Nhấp vào nút Cài đặt.
   Nhấp vào nút Cài đặt.

Bước 2. Mở một dự án hiện có trong Mã VS

1. Từ tab “Explorers” trong thanh bên, nhấp vào nút Mở thư mục.
   Nhấp vào nút Mở thư mục từ tab Explorer.
2. Mở thư mục từ thư mục ưa thích của bạn.
   Xác định vị trí thư mục dự án của bạn từ thư mục ưu tiên.
3. Sau khi mở thư mục, bạn sẽ thấy tất cả các tệp nguồn.
   Tệp nguồn hoặc tệp dự án bên trong thư mục.
4. Như bạn có thể thấy từ hình trên, tôi đã thiết lập một tệp HTML đơn giản để tạo kiểu cho nó bằng SASS

Bước 3. Tạo tệp SASS/SCSS

1. Bên trong bảng “Explorer”, nhấp vào nút Tệp mới.
   Nhấp vào nút Tệp mới.
2. Nhập tên bất kỳ và nhấn Enter. Đảm bảo thêm. ngổ ngáo hoặc. scss ở cuối tên tệp.
   Nhập tên tệp với. scss hoặc. phần mở rộng sass.
3. Bây giờ, hãy viết mã SASS để tạo kiểu cho tệp HTML của bạn. Ví dụ: tôi đang nhập mã sau.

   .card {
   position: relative;
   background-color: red;
   .card__name {
   background-color: blueviolet;
   }

4. Nhấp vào nút Xem Sass từ thanh Trạng thái ở cuối Mã VS.
   Nhấp vào nút Xem Sass từ Thanh trạng thái.
5. Cuối cùng, tiện ích mở rộng sẽ tạo một. css và bản đồ. css bên trong thư mục dự án. Hình ảnh sau đây cho thấy đầu ra của chúng tôi.
   Kết quả hiển thị kiểu dáng mà chúng tôi đã đạt được khi sử dụng SASS.

Như bạn có thể nhận thấy, tiện ích mở rộng Live Sass Compiler biên dịch các tệp SASS của bạn theo thời gian thực. Ngoài ra, việc chọn SASS thay vì viết CSS trực tiếp sẽ loại bỏ nhiều yêu cầu cú pháp, như khối và dấu chấm phẩy. Nó giúp dễ dàng thực thi CSS

Cách sử dụng trình biên dịch sass trực tiếp trong mã VS?

Sass có giống như SCSS không?