Cài đặt SCSS Tự động Biên Dịch Code CSS - Học Web Chuẩn

Cài đặt SCSS tự động biên dịch code 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:

npm install

• 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

npm install 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

npm run scss

• 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.

Cài đặt SCSS

SCSS - cú pháp

Học web chuẩn

HƯỚNG DẪN HỌC

SCSS

• SCSS là gì?
• Biên dịch SCSS sang CSS
• Cài đặt tự động biên dịch SCSS sang CSS
• Cú pháp viết SCSS
• SCSS - biến (variable)
• SCSS - toán tử (oparator)
• SCSS - Nesting
• SCSS - @extend
• SCSS - @mixin & @include
• SCSS - Placeholders
• SCSS - @function
• SCSS - câu lệnh @if @else
• SCSS - vòng lặp @for
• SCSS - vòng lặp @while
• SCSS - vòng lặp @each
• SCSS - @import

Hướng dẫn học XHTML & HTML5

Bài tập HTML & HTML5

Hướng dẫn học CSS

Hướng dẫn học CSS3

Bài tập CSS & CSS3

Hướng dẫn học SCSS

Hướng dẫn học Responsive

Hướng dẫn học jQuery

Bài tập jQuery

Hướng dẫn học ES6

Hướng dẫn học React.js

Hướng dẫn học Webpack

Hướng dẫn XAMPP

Hướng dẫn học PHP

Hướng dẫn học Laravel

Hướng dẫn học htaccess

THAM KHẢO

• Tham khảo
• Tham khảo HTML4/XHTML
• Tham khảo HTML5
• Tham khảo CSS
• Tham khảo CSS3
• Tham khảo jQuery

CHUYÊN ĐỀ

• Chuyên đề
• Chuyên đề HTML/CSS
• Chuyên đề HTML5/CSS3
• Chuyên đề jQuery/JS
• jQuery/JS plugin

GÓP Ý - LIÊN HỆ

• BẠN SẼ TÀI TRỢ?DONATE
• CÔNG CỤ TẠO CSS3CSS3 GENERATOR
• BỘ CÔNG CỤGENERATOR TOOLS
• CÔNG CỤ HỖ TRỢWEB TOOLS
• CÔNG CỤ TẠO RANDOMRANDOM GENERATOR
• CÔNG CỤ KIỂM TRA RESPONSIVE TEST
• CHIA SẺ HAYWEB & TOOLS

• 
• 
•