- 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
- Cài đặt SCSS
- Ví dụ: biên dịch SCSS sang CSS
- 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, ...
Cài đặt SCSS
- Ví dụ: biên dịch SCSS sang CSS
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, ... [Báo gì kệ nó, chưa cần quan tâm ^^]:
- 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.
Ví dụ: biên dịch SCSS sang CSS
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.
- 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ổ
scss style.scss style.css
2 [nhấn tổ hợp phímscss style.scss style.css
3, gõscss style.scss style.css
2, 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 ^^]:
$color-blue: blue; $bg-color: #f1f1f1; section { background-color: $bg-color; h2 { color: $color-blue; } }
- Vậy là cài xong SASS rồi đó, thử biên dịch [complile] SCSS sang CSS thôi ^^
Để thử nghiệm biên dịch SCSS sang CSS ta thực hiện theo các bước sau:
Tạo file scss style.scss style.css
5 bên trong thư mục scss style.scss style.css
6.
Thêm nội dung thử nghiệm cho file scss style.scss style.css
5.
scss style.scss style.css
- Chạy lệnh biên dịch SCSS sang CSS.
Tạo file scss style.scss style.css
5 với nội dung sau:
Từ cửa sổ
scss style.scss style.css2 ta trỏ tới thư mục
section {
background-color: #f1f1f1;
}
section h2 {
color: blue;
}
/*# sourceMappingURL=style.css.map */
0 bằng cách gõ lần lược các lệnh:- Trỏ tới ổ đĩa
section { background-color: #f1f1f1; } section h2 { color: blue; } /*# sourceMappingURL=style.css.map */
1:
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é. 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]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 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.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ên
Trong thư mục
section {
background-color: #f1f1f1;
}
section h2 {
color: blue;
}
/*# sourceMappingURL=style.css.map */
8 của ổ C. Các bạn tạo một thư mục section {
background-color: #f1f1f1;
}
section h2 {
color: blue;
}
/*# sourceMappingURL=style.css.map */
9 như sau ổ C. Các bạn tạo một thư mục section {
background-color: #f1f1f1;
}
section h2 {
color: blue;
}
/*# sourceMappingURL=style.css.map */
9 như sauMở Sublime text lên và thêm thư mục
npm install -g sass
0và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
File index.htmlindex.html
Giáo trình Sass tại suntech.edu.vn Home About News Product Contact
File app1.scssapp1.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.sassapp2.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
npm install -g sass
2 hoặc npm install -g sass
3 sang file npm install -g sass
4css/style.css. File đó sẽ được tạo ra sau khi chúng ta sử dụng câu lệnh sass để compile file npm install -g sass
2 hoặc npm install -g sass
3 sang file npm install -g sass
4Bây giờ chúng ta sẽ compile lần lượt các file
npm install -g sass
5 và npm install -g sass
6 để chạy thử nhéTruy cập vào thư mục demo1 cd demo1
Compile file app1.scssapp1.scss
Thự hiện lệnh
scss style.scss style.css0
Sau khi compile xong các bạn sẽ thấy có 2 file được sinh ra là style.css và
npm install -g sass
7style.css và npm install -g sass
7Chạy file
npm install -g sass
8 lên các bạn được kết quả như sauCompile file app2.sassapp2.sass
Trước khi tiến hành
npm install -g sass
9các bạn xóa thư mục css trong demo1 đicss trong demo1 điSau đó thực hiện lệnh
scss style.scss style.css1
Chúng ta được kết quả tương tự
Chạy file
npm install -g sass
8Tổ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.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 --version
1 nếu muốn code có style giống CSS thuần thì chọn sass --version
2Mì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