Hướng dẫn generate css from scss

• 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ím Window+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ục D:/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ục scss-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 file style.css và style.css.map, nội dung style.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
• 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 file package-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 file style.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 mode cmd đang chạy bằng cách nhấn tổ hợp phím Ctrl + 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ịch npm run scss.