WebStorm là một phần mềm chuyên nghiệp để viết code liên quan đến web. Chỉnh sửa file HTML, CSS, JS, .. chuyên nghiệp. Ngoài tất cả các tính năng khác của các IDE khác, nó còn được hỗ trợ bởi những tính năng thông minh của họ hàng Jetbrains. Một fan cuồng của Jetbreain, nên hôm nay sẽ hướng dẫn cấu hình để sử dụng SCSS trong WebStorm (Áp dụng với PHPStorm cũng tương tự)
Tải về WebStorm : https://www.jetbrains.com/webstorm/

1, Vì sao chọn SCSS chứ không phải vì CSS

Thực ra thì để trình duyệt web chỉ đọc được file CSS, nên dù sao bạn cũng phải biên dịch từ SCSS qua CSS. Nhưng vấn đề là CSS khó quản lý, SCSS lại có thể khắc phục và mở rộng để khiến code CSS dễ quản lý, dễ hiểu hơn.
Bài này khá chi tiết về sự so sánh: https://medium.com/swlh/advantages-of-using-a-preprocessor-sass-in-css-eb7310179944

2, Cấu hình SCSS trong File Watcher của WebStorm

Nguyên lý của SCSS là sẽ biên dịch thành CSS. Trong WebStorm, mỗi khi sử dụng Ctrl+S ở file SCSS thì nó sẽ tự sinh ra file CSS tương ứng.


Ở hình trên, sau khi biên dịch thì file style.scss sẽ tạo ra 2 file style.css và style.css.map
Cài đặt SCSS:

Cài môi trường chạy SCSS cho Window
Node.JS: https://nodejs.org/en/
  • Cài SCSS/SASS, mở Cmd chạy lệnh: 
    • window
[npm install -g sass]

    • linux
[npm install node-sass --unsafe-perms] 

Cấu hình SCSS trong File Watcher của WebStorm

Mở WebStorm, ấn tổ hợp Ctrl+Alt+S => Tools=> File Watcher
Sau đó, cấu hình mục Edit Watcher như sau:

Trong đó cần chú ý:

Program: 
C:\Users\##tencuaPC\AppData\Roaming\npm\sass
Arguments:
  • Code 1: Tạo ra file map và file css
[$FileName$ $FileNameWithoutExtension$.css]
  • Code 2: Dùng đoạn sau để minified file css luôn
[$FileName$ $FileNameWithoutExtension$.css --style compressed]
 Output paths to refresh:
[$FileNameWithoutExtension$.css]

OK, vậy là file SCSS đã cấu hình trong file Watcher của Webstorm thành công. Mỗi khi cần dùng, chỉ cần Ctrl+S trên file .scss là xong.
  • [message]
    • Chú ý:
      • Khi nhúng đường dẫn vào file HTML, nhớ dẫn file .css. Không dẫn file .scss nhé