Giới thiệu
Trong bài viết trước, chúng ta đã tìm hiểu về Mixins, Extends và Functions trong SASS. Trong bài viết này, chúng ta sẽ cùng nhau thiết lập môi trường để compile SASS sang CSS.
Nội dung
Để hiểu rõ bài viết này, bạn cần có kiến thức cơ bản về CSS và xem qua các bài viết trước trong khóa học Lập trình CSS và SASS nâng cao với dự án website Landing Page. Trong bài viết này, chúng ta sẽ tìm hiểu về:
- Command Line và một số cú pháp đơn giản.
- Sử dụng NPM để cài đặt Node-sass.
Command Line và một số cú pháp đơn giản
Command Line là một công cụ quen thuộc đối với những người dùng hệ điều hành Linux. Nó cho phép bạn thao tác với máy tính thông qua các câu lệnh, sử dụng bàn phím mà không cần dùng chuột. Việc làm quen với các câu lệnh cơ bản của Command Line là rất cần thiết, vì nó giúp tăng tốc độ thao tác và có vẻ "pro" hơn.
Đối với Windows, bạn có thể mở Command Prompt. Đối với Mac và Linux, bạn có thể mở Terminal. Trong khóa học này, chúng ta sẽ sử dụng Command Prompt và Terminal một cách tương tự. Để tìm hiểu thêm về Command Line, bạn có thể tham khảo SHELL WORKSHOP.
Dưới đây là một số lệnh cơ bản trong Command Line:
Lệnh ls - Xem các files, folders bên trong vị trí hiện tại:
Ví dụ: Nếu folder đang làm việc là C:Users, sử dụng lệnh ls, nó sẽ hiển thị ra các folder bên trong C: gồm Admin, Default, Public, defaultuser0 và các folder, file ẩn.
Lệnh cd - Chuyển đổi folder làm việc:
Ví dụ: Muốn chuyển từ folder Users vào folder Admin.
Lệnh mkdir - Tạo folder:
Ví dụ: Tạo folder test trong folder Admin.
Lệnh touch - Tạo files:
Ví dụ: Tạo file test.html trong folder test.
Lệnh rm - Xóa files:
Ví dụ: Xóa file test.html.
Lệnh rm -rf - Xóa folder:
Ví dụ: Xóa folder test trong folder Admin.
Có rất nhiều lệnh khác trong Command Line và chúng ta chỉ giới thiệu qua một số lệnh cơ bản. Bạn nên tìm hiểu thêm phần này thông qua khóa học hoàn toàn miễn phí SHELL WORKSHOP.
Sử dụng NPM cài đặt Node-sass
NPM (Node Packages Management) là chương trình command line dùng để quản lý package của Node.js. Khi bạn cài đặt Node.js, NPM cũng sẽ được cài đặt kèm theo. Trước tiên, hãy kiểm tra xem Node đã được cài đặt hay chưa bằng cách sử dụng lệnh node -v.
Tiếp theo, quay trở lại folder chứa project Web Landing Page của chúng ta. Chúng ta sẽ tiến hành từng bước sau:
Bước 1: Khởi tạo môi trường làm việc với NPM
Sử dụng lệnh npm init để khởi tạo môi trường làm việc với NPM. Bạn có thể đặt tên cho package mà bạn muốn khởi tạo môi trường làm việc với NPM (tên mặc định sẽ là tên của folder). Bạn có thể bỏ qua toàn bộ phần này, vì chúng ta sẽ không đề cập đến nó.
Cuối cùng, gõ 'yes' để hoàn thành quá trình khởi tạo. NPM sẽ tự động tạo file package.json chứa các thông tin đã khai báo.
Bước 2: Cài đặt package trong NPM sử dụng Command Prompt
Để cài đặt package trong NPM, sử dụng câu lệnh npm install . Trong đó, -save giúp lưu package vào file package.json.
Ví dụ: Để cài đặt package node-sass, sử dụng lệnh npm install node-sass -save.
Khi bạn muốn remove package đã cài đặt, chỉ cần sử dụng lệnh npm uninstall . Tên package cũng sẽ tự động được xóa khỏi package.json.
Bạn cũng có thể cài đặt package ở dev dependencies (những package chỉ sử dụng khi code và không làm phần của project khi chạy thực tế) bằng cách sử dụng lệnh npm install -save-dev . Ví dụ: npm install -save-dev node-sass.
Kết luận Trong bài viết này, chúng ta đã tìm hiểu về command line và cách setup và cài đặt package cần thiết để compile SASS sang CSS. Trong bài viết tiếp theo, chúng ta sẽ tìm hiểu cách sử dụng Node-sass compile SASS sang CSS và áp dụng vào project của chúng ta.
Cảm ơn bạn đã theo dõi bài viết. Hãy để lại bình luận để giúp phát triển bài viết tốt hơn.