- Trang chủ
- Hướng dẫn học
- Hướng dẫn học SCSS
- Biên dịch SCSS sang CSS
Biên dịch SCSS sang CSS
Bài học này sẽ giúp bạn cài đặt SCSS biên dịch [compile] sang CSS, các bước tiến hành như sau.
- Cài đặt môi trường Node.js
- Cài đặt SCSS
- Ví dụ: biên dịch SCSS sang CSS
Cài đặt môi trường Node.js
- SCSS có nhiều cách cài đặt khác nhau, bạn có thể tạo file và nhờ các chương trình cài đặt khác hỗ trợ, tuy nhiên cách cài đặt và sử dụng với Node.js sẽ cho bạn nhiều lợi ích về sau, ví dụ như có thể cấu hình chạy trực tiếp cho môi trường thực,... sử dụng Node.js cho các ứng dụng web khác, ...
- Học Web Chuẩn sẽ giới thiệu các bạn cách làm việc của SCSS với Node.js nhé, các cách khác thì các bạn có thể tìm hiểu thêm he.
- Trước tiên bạn cần cài đặt Node.js theo các bước tại Hướng dẫn cài đặt Node.js.
Cài đặt SCSS
- Sau khi đã cài đặt xong Node.js như trên, ta tiến hành cài đặt SASS
[SCSS] bằng dòng lệnh duy nhất: từ cửa sổ
cmd
[nhấn tổ hợp phímWindow+R
, gõcmd
, enter], sau đó gõ nội dung bên dưới:
Kết quả [Báo gì kệ nó, chưa cần quan tâm ^^]:
- Vậy là cài xong SASS rồi đó, thử biên dịch [complile] SCSS sang CSS thôi ^^
Ví dụ: biên dịch SCSS sang CSS
Để thử nghiệm biên dịch SCSS sang CSS ta thực hiện theo các bước sau:
- Tạo file
style.scss
bên trong thư mụcD:/scss-project/
. - Thêm nội dung thử nghiệm cho file
style.scss
. - Chạy lệnh biên dịch SCSS sang CSS.
Tạo file style.scss
với nội dung sau:
$color-blue: blue; $bg-color: #f1f1f1; section { background-color: $bg-color; h2 { color: $color-blue; } }
- Từ cửa sổ
cmd
ta trỏ tới thư mụcscss-project
bằng cách gõ lần lược các lệnh:
Trỏ tới ổ đĩa D
:
Di chuyển tới thư mục scss-project
Biên dịch SCSS sang CSS bằng lệnh:
scss style.scss style.css
- Khi này xem lại trong thư mục
D:/scss-project/
ta sẽ thấy chương trình tự động tạo filestyle.css
vàstyle.css.map
, nội dungstyle.css
chính là file CSS mà ta mong muốn xuất hiện.
Nội dung file style.css
section {
background-color: #f1f1f1;
}
section h2 {
color: blue;
}
/*# sourceMappingURL=style.css.map */
- Như vậy là ta đã cài đặt và biên dịch thành công SCSS sang CSS.
- Trang chủ
- Hướng dẫn học
- Hướng dẫn học SCSS
- Cài đặt SCSS tự động biên dịch code CSS
Cài đặt SCSS tự động biên dịch code CSS
- Sau khi cài đặt SCSS biên dịch được CSS như bài trước đã trình bày, bài học này sẽ giúp các bạn cài đặt tự động biên dịch SCSS sang CSS mà không cần mỗi lần save phải chạy lại câu lệnh thực thi.
Cấu hình SCSS tự động biên dịch CSS
- Để mỗi lần save file SCSS thì chương trình sẽ tự động biên dịch sang file CSS mà không cần chạy lại lệnh biên dịch, ta lần lược làm các bước sau:
- Tạm thời xóa 2 file
style.css
vàstyle.css.map
đi, vì khi biên dịch sẽ tự động tạo file mới. - Cài đặt npm bên trong thư
mục
scss-project
. - Cài đặt node-sass
- Tạo file package.json
- Chạy lệnh biên dịch tự động
- Tạm thời xóa 2 file
- Cấu trúc thư mục hiện tại như sau:
scss-project
- style.scss
Cài đặt npm bên trong thư mục scss-project
:
- Khi này bên trong thư mục
scss-project
sẽ tự động tạo filepackage-lock.json
là ta đã cài đặt thành công.
Cài đặt node-sass
- Khi này chương trình sẽ tự động tạo folder
node_modules
, nơi đây chứa các modules cần cho việc biên dịch. - Ta có cấu trúc thư mục như sau:
scss-project
node_modules
- ...
- package-lock.json
- style.scss
Tạo file package.json
Cách tạo đơn giản nhất là copy từ file package-lock.json
đặt lại tên package.json
, sau đó thay đổi nội dung bên trong như sau:
{ "dependencies": { "node-sass": "^4.7.2" }, "scripts": { "scss": "node-sass --watch style.scss -o css" } }
style.scss
tên file, hoặc nếu file bên trong thư mục thì ghi rõ luôn thư mục, ví dụscss/style.scss
.css
tên thư mục sẽ được tạo tự động, file sẽ được lưu tại đây.
Chạy lệnh biên dịch tự động
- Tới đây ta đã hoàn thành cài đặt biên dịch tự động SCSS sang CSS, các bạn có thể thử bằng cách thay đổi code của file
style.scss
, save lại, ta sẽ thấy chương trình tự động biên dịch nội dung của file/css/style.css
, mỗi lần thay đổi thì nội dung filestyle.css
cũng thay đổi theo. - Lưu ý: mỗi
khi thay đổi nội dung file
package.json
, ví dụ như chỉnh lại tên thư mục lưu file css, thì ta cần chạy lệnh biên dịch, muốn vậy ta cần thoát modecmd
đang chạy bằng cách nhấn tổ hợp phímCtrl + C
, gõy
, sau đó chạy lại lệnh biên dịch tự động là được. - Từ giờ, mỗi khi bạn muốn chạy lệnh tự động biên dịch, bạn cần trỏ tới
scss-project
và chạy lệnh biên dịchnpm run scss
.