SASS CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 02: Cấu hình SASS trên Netbeans

Sau khi cài đặt SASS xong thì chúng ta cần một editor để lập trình. Và như bài trước mình đã trình bày thì mình sử dụng Netbeans để code bởi vì nó có một số tính năng như Auto Refresh Page - Tự động tạo và đổi file SASS thành file CSS.

1. Cấu hình SASS trên Netbeans

Trước khi bắt đầu hãy chắc chắn rằng bạn đã cài đặt Netbeans Ruby Installer nhé.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Sau khi cài đặt Netbeans Ruby Installer thì nó tự động nhận diện SASS trong hệ thống, lúc này bạn sẽ thực hiện các bước sau để cấu hình SASS trên Netbeans.

Bước 1: Kiểm tra biến môi trường Environment Variabless.

Bạn click chuột phải vào My Computer -> Properties -> Advanced System Setting -> Environment Variabes. Tại đây bạn double chuột vào dòng Path ở phần System Variables và kéo xuống phía cuối dòng xem có xuất hiện đường dẫn tới thư mục Bin cài đặt Ruby Installer hay chưa? Nếu chưa thì gỡ ra và quay lại bài Sass là gì để cài đặt theo hướng dẫn nhé.

cau hinh sass tren netbeans 1 png

Bước 2: Cấu hình CSS Preproseccors

Bạn bật Netbeans lên và thực hiện các bước sau: Vào Tools -> Options -> Miscellaneous -> CSS Preprocessors,  sau đó tại phần Sass Path bạn nhập đường dẫn vào file sass.bat (nằm trong thư mục bin). Lưu ý là bạn check luôn hai ô Open Outout on ErrorGenerate extra infomation (debug) nhé.

Sau khi thực hiện xong bạn nhấn OK là xong.

cau hinh sass tren netbeans 2 png

Bước 3: Tạo mới Project trong Netbeans

Bạn chọn File -> New Project -> HTML5 -> HTML5 Application with Existing Sources, sau đó tại mục Site Root bạn nhập đường dẫn tới Project của bạn.

cau hinh sass tren netbeans 3 png

Bây giờ bạn sẽ tạo một số file và folder như trong hình sau (click chuột phải chọn new file đê tạo file mới):

cau hinh sass tren netbeans 5 png

Trong đó:

  • Thư mục css chứa file được generate từ file SCSS.
  • Thư mục scss chứa file SCSS
  • File index.html dùng để chạy demo
Bước 4: Cấu hình SASS cho Project

Bạn click chuột phải vào Project trên Netbeans và chọn Properties.

cau hinh sass tren netbeans 4 png

Sau đó chọn tab CSS Preprocessors và thực hiện các bươc sau:

  • Check vào ô Complie Sass Files on Save
  • Tại phần Input bạn nhập tên folder chứa file scss
  • Tại phần Output bạn nhập tên folder chứa file css

cau hinh sass tren netbeans 7 png

Cuối cùng bạn click OK là xong.

Bước 5: Cấu hình Auto Refresh Page

Bạn thực hiện hai bước như sau:

  • Chọn trình duyệt chạy, mình chọn Chrome
  • Click Run để chạy thử, lúc này Chrome sẽ yêu cầu cài đặt Extension của Netbeans thì bạn cài theo nó một cách bình thường nhé.

cau hinh sass tren netbeans 8 png

Ok kể từ bây giờ mỗi lần bạn Save thì trình duyệt sẽ tự động Refresh.

2. Tạo mới một file Sass 

Chúng ta sẽ tạo một file SCSS với tên là style.scss để xem nó có tự động tạo thêm file style.css không nhé.

Bạn click chuột phải vào thư mục scss nằm trên project và chọn New File, sau đó bạn chọn định dạng file là scss để tạo mới.

cau hinh sass tren netbeans 9 png

Tiếp theo bạn nhập tên file là style và chọn OK. Sau khi tạo xong nhìn vào Project bạn sẽ thấy các file như vậy là đã thành công.

cau hinh sass tren netbeans 11 png

3. Lời kết

Vậy là mình đã hướng dẫn bạn cấu hình SASS trên Netbeans xong rồi đấy, các bước tuy hơi dài nhưng khi bạn thực hiện theo sẽ rất là ngắn nên đừng lo sợ nhé.

Trong quá trình cài đặt nếu xuất hiện lỗi ""ruby.exe"' is not recognized as an internal or external command, operable program or batch file." thì bạn gỡ Ruby Installer ra và cài đăt lại như bài trước mình hướng dẫn nhé.

Cùng chuyên mục:

Mở đầu: Sự khác nhau giữa SASS và SCSS

Mở đầu: Sự khác nhau giữa SASS và SCSS

Khi bạn đọc series này bạn sẽ thấy mình giới thiệu và SASS mà lại…

Bài 16: Các hàm xử lý Number trong SASS

Bài 16: Các hàm xử lý Number trong SASS

Tiếp tục tìm hiểu các hàm có sẵn trong SASS và trong bài này chúng…

Bài 15: Các hàm xử lý chuỗi trong SASS

Bài 15: Các hàm xử lý chuỗi trong SASS

SASS cung cấp khá nhiều các hàm có sẵn giúp cho việc lập trình trở…

Bài 14: Function trong SASS

Bài 14: Function trong SASS

Function không còn xa lại gì trong các ngôn ngữ lập trình nhưng với SASS…

Bài 13: Vòng lặp each trong SASS

Bài 13: Vòng lặp each trong SASS

Ta đã biết vòng lặp foreach trong PHP dùng để lặp mảng và mỗi lần…

Bài 12: Vòng lặp while trong SASS

Bài 12: Vòng lặp while trong SASS

Vòng lặp for dùng để lặp cho những trường hợp ta biết trước tổng số…

Bài 11: Các toán tử hay dùng trong SASS

Bài 11: Các toán tử hay dùng trong SASS

SASS hỗ trợ khá nhiều toán tử không kém gì các ngôn ngữ lập trình,…

Bài 10: Vòng lặp for trong SASS

Bài 10: Vòng lặp for trong SASS

Vòng lặp là một khái niệm không còn xa lạ gì nữa với các bạn…

Bài 09: Lệnh if else trong SASS

Bài 09: Lệnh if else trong SASS

Còn khá nhiều kiến thức quan trọng của SASS mà bạn cần phải học và…

Bài 08: Tìm hiểu Mixin trong SASS

Bài 08: Tìm hiểu Mixin trong SASS

Mình đã từng code CSS cho nhiều trang và mình cũng phân chia và comment…

Bài 07: Nested Selector trong SASS

Bài 07: Nested Selector trong SASS

Như chúng ta biết hoạt động truy vấn các đối tượng HTML trong CSS sẽ…

Bài 06: Khai báo và sử dụng biến trong SASS

Bài 06: Khai báo và sử dụng biến trong SASS

Như mình đã nói SASS có những chức năng rất giống với một ngôn ngữ…

Bài 05: Tìm hiểu Place Holder trong SASS

Bài 05: Tìm hiểu Place Holder trong SASS

Trong bài này chúng ta tìm hiểu cách khai báo một Placer Hoder để cho…

Bài 04: Kế thừa extend trong SASS

Bài 04: Kế thừa extend trong SASS

Như một ngôn ngữ lập trình, SASS cho phép chúng kế thừa lẫn nhau và…

Bài 03: Các lệnh biên dịch file SASS thành file CSS

Bài 03: Các lệnh biên dịch file SASS thành file CSS

Nếu bạn không muốn sử dụng Netbeans và chức năng tự động generate của nó…

Bài 01: SASS là gì? Cài đặt SASS trên Window

Bài 01: SASS là gì? Cài đặt SASS trên Window

Hôm nay chúng ta sẽ tìm hiểu một công nghệ mới dành cho các frontend…

Top