- 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
.
Hướng dẫn học SCSS, nội dung bài học đơn giản, khoa học giúp bạn cài đặt, tự động thực thi file CSS chỉ với thao tác save, giúp bạn làm quen với các nội dung của SCSS một cách nhanh chóng và dễ hiểu nhất.
- SCSS là gì? - giúp bạn hiểu được SCSS có thể làm gì.
- Biên dịch SCSS sang CSS - hướng dẫn cài đặt từ con số 0.
- SCSS auto compile - hướng dẫn cài đặt tự động biên dịch SCSS sang CSS.
- Cú pháp viết SCSS - hướng dẫn cách viết cấu trúc.
- SCSS - biến [variable] - khai báo và xử lý biến.
- SCSS - toán tử [oparator] - tính toán.
- SCSS - Nesting - cách viết phân cấp.
- SCSS - @extend - kế thừa thuộc tính.
- SCSS - @mixin & @include - khai báo và kế thừa kết hợp đối số.
- SCSS - Placeholders - khá giống @mixin, tuy nhiên sẽ gom các thành phần có cùng Placeholders lại với nhau.
- SCSS - @function - hướng dẫn tạo và gọi hàm.
- SCSS - câu lệnh @if @else - hướng dẫn cách viết câu lệnh if.
- SCSS - vòng lặp @for - hướng dẫn cách viết vòng lặp for.
- SCSS - vòng lặp @while - hướng dẫn cách viết vòng lặp while.
- SCSS - vòng lặp @each - hướng dẫn cách viết vòng lặp each.
- SCSS - @import - kết hợp các file SCSS.
Bắt đầu học SCSS thôi
Chúng ta có nhiều cách để setup [install] SASS trên máy tính của mình. Cũng có một vài công cụ open source giúp bạn bắt đầu với SASS chỉ trong vài phút. Bạn cũng có thể sử dụng Command line hoặc sử dụng GitHub repository.... Tuy nhiên chúng ta sẽ chọn phương án tốt nhất để thực hiện, phương án đó là gì? hãy cùng mình đi tìm hiểu ngay bây giờ nhé.
Chuẩn bị
Bạn phải chắc chắn là đã cài Node Js và NPM ở trên máy của mình rồi nhé. Nếu bạn chưa cài Node Js và NPM thì xem hướng dẫn tại đây [thông thường sau khi cái NodeJs thì NPM cũng được cài cùng luôn]
Về chương trình viết code bạn có thể sử dụng Sublime text hoăc VS Code tùy theo thói quen của mỗi người.
Cài đặt SASS
Chúng ta sẽ sử dụng NodeJs và cài qua NPM command. Vì hầu hêt các bạn đều sử dụng window nên hướng dẫn này mình thực hiện trên window.
Step 1: Mở command line
Step 2: Cài sass global
npm install -g sass
Chạy lệnh sau để kiểm tra version của Sass
sass --version
Kết quả
Chạy chương trình Sass đầu tiên
Trong thư mục hoc-sass
của ổ C. Các bạn tạo một thư mục demo1
như sau
Mở Sublime text lên và thêm thư mục demo1
vào phần quản lý project của Sublime text như sau
Kết quả
Tiếp theo, trong thư mục demo1
chúng ta tạo các file sau:
File index.html
Giáo trình Sass tại suntech.edu.vn Home About News Product Contact
File app1.scss
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
File app2.sass
nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none
Các bạn thấy, chúng ta chưa hề có file
css/style.css. File đó sẽ được tạo ra sau khi chúng ta sử dụng câu lệnh sass để compile file .sass
hoặc .scss
sang file .css
Bây giờ chúng ta sẽ compile lần lượt các file app1.scss
và app2.sass
để chạy thử nhé
Truy cập vào thư mục demo1 cd demo1
Compile file app1.scss
Thự hiện lệnh
sass app1.scss css/style.css
Sau khi compile xong các bạn sẽ thấy có 2 file được sinh ra là style.css và style.css.map
Chạy file index.html
lên các bạn được kết quả như sau
Compile file app2.sass
Trước khi tiến hành compile
các bạn xóa thư mục css trong demo1 đi
Sau đó thực hiện lệnh
sass app2.sass css/style.css
Chúng ta được kết quả tương tự
Chạy file index.html
Tổng kết
Qua bài này các bạn có cái nhìn rõ hơn về cơ chế hoạt động của SASS và nắm được câu lệnh compile code khi dùng SASS. Mặc dù hai định dạng file khác nhau .scss hay .sass thì câu lệnh compile là như nhau.
Trong thực tế chúng ta chỉ lựa chọn 1 trong hai định dạng file tùy thuộc vào thói quen của từng bạn hay quy định của từng project. Nếu muốn code ngắn gọn thì dùng .sass
nếu muốn code có style giống CSS thuần thì chọn .scss
Mình sẽ dừng bài viết ở đây, có bất kỳ câu hỏi nào các bạn hãy comment xuống dưới hoặc chat trực tiếp lên Fanpage của SUNTECH VIỆT NAM. Ở bài tiếp theo chúng ta sẽ tìm hiểu về Các cú pháp cơ bản trong SASS