Hướng dẫn npm install scss - npm cài đặt scss
|
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é. 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é. Show 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)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.Sublime text hoăc VS Code tùy theo thói quen của mỗi người. Cài đặt SASSChú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.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 Mở command line  Step 2: Cài sass global: 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ênTrong thư mục sass --version
0 như sau ổ C. Các bạn tạo một thư mục sass --version
0 như sauMở Sublime text lên và thêm thư mục sass --version
1vào phần quản lý project của Sublime text như sauKết quả Chạy chương trình Sass đầu tiên Trong thư mục sass --version
0 như sauindex.html<html> <head> <title>Giáo trình Sass tại suntech.edu.vntitle> <link rel="stylesheet" type="text/css" href="./css/style.css" /> head> <body> <nav> <ul> <li><a href="#">Homea>li> <li><a href="#">Abouta>li> <li><a href="#">Newsa>li> <li><a href="#">Producta>li> <li><a href="#">Contacta>li> ul> nav> body> html> Mở Sublime text lên và thêm thư mục sass --version
1vào phần quản lý project của Sublime text như sauapp1.scssnav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } Tiếp theo, trong thư mục sass --version
1chúng ta tạo các file sau:app2.sassnav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none File index.htmlcss/style.css. File đó sẽ được tạo ra sau khi chúng ta sử dụng câu lệnh sass để compile file sass --version
3 hoặc sass --version
4 sang file sass --version
5"stylesheet" type="text/css" href="./css/style.css" /> File app1.scss Truy cập vào thư mục demo1 cd demo1 File app2.sassapp1.scssCá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 --version
3 hoặc sass --version
4 sang file sass --version
5sass app1.scss css/style.css
Bây giờ chúng ta sẽ compile lần lượt các file sass --version
6 và sass --version
7 để chạy thử nhéstyle.css và sass --version
8Compile file app1.scss Thự hiện lệnhapp2.sassSau khi compile xong các bạn sẽ thấy có 2 file được sinh ra là style.css và sass --version
8css trong demo1 điChạy file sass --version
9 lên các bạn được kết quả như sausass app2.sass css/style.css
Compile file app2.sass Trước khi tiến hành <html> <head> <title>Giáo trình Sass tại suntech.edu.vntitle> <link rel="stylesheet" type="text/css" href="./css/style.css" /> head> <body> <nav> <ul> <li><a href="#">Homea>li> <li><a href="#">Abouta>li> <li><a href="#">Newsa>li> <li><a href="#">Producta>li> <li><a href="#">Contacta>li> ul> nav> body> html>0các bạn xóa thư mục css trong demo1 đi Sau đó thực hiện lệnhChúng ta được kết quả tương tự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. Chạy file sass --version
9Tổng kết |
