Trong bài viết này chúng ta sẽ cũng tìm hiểu về một thứ gọi là “Công nghệ” mới dành cho các Frontend Developers. Tuy nói là một công nghệ mới cho hoa mỹ nhưng thực chất thì đây là một  loại tool dùng phiên dịch SSAS thành CCS để giúp cho trình duyệt có thể hiểu được. Vậy nó SSAS là gì ? chúng ta hãy tìm hiểu một chút về khái niệm của nó trước khi đi vào hướng dẫn cài đặt SSAS cho windows nhé.

1. SSAS là gì?

SASS được xem là một CSS Processor dùng để hỗ trợ trong việc quản lí các mã (code) CSS, Bạn nên thử sử dụng vì đây là một công cụ khá hay để quản lí mã nguồn  (source code) của mình. Những code của SSAS thì gần giống với ngôn ngữ lập trình nên nó khá ngắn gọn vì thế sử dụng trong các dự án lớn sẽ đem lại những lợi ích nhất định. Nhưng khi chúng ta sử dụng SSAS thì trình duyệt sẽ không hiểu những code đó vì thế chúng ta cần một bước đó là chuyển từ SSAS sang code CSS và với công việc này chúng ta sẽ cần một công cụ, phần mềm thứ ba để làm việc này. Ở đây chúng ta dùng phần mềm ruby để dịch nên bạn cần phải cài đặt phần mềm này.

SASS được chia làm hai loại đó là SASS và SCSS  Mỗi loại thì có một cách viết code khác nhau. Xem ví dụ dưới đây để hiểu rõ hơn vấn đề này.

SSAS:

screen-shot-2016-09-30-at-10-26-03-pm

SCSS:

screen-shot-2016-09-30-at-10-26-14-pm

Khi biên dịch 2 ví dụ trên ta sẽ được như sau

screen-shot-2016-09-30-at-10-26-21-pm

Đối với SSAS để xuống dòng để phân biệt các cấp thì dùng phím tab Enter, còn SCSS khi ngăn chia các cấp thì lại dùng dấu ngoặc { } và dấu ;  . TRong bài này mình sẽ dùng SCSS để viết.

2. Cài đặt SASS cho Windows.

Sau khi đã biết được SASS là gì thì chúng ta hãy cùng cài đặt một số phần mềm cần thiết để học SASS.

Editor: Ở đây mình sẽ sử dụng Netbeans vì nó có chức năng Auto Refresh trang web khi lưu ngoài ra còn hỗ trợ auto biên dịch file SCSS sang file CSS. Bạn có thể sử dụng một số công cụ khác như là  Sublime Text nó cũng có thể làm được. Hiện nay bạn có thể tải về và cài đặt tại trang chủ của nó và chọn luôn version luôn nhé . Nếu trong quá trình cài đặt, phần mềm yêu cầu bạn cài đặt thêm một java nữa thì bạn hãy truy cập vào link mà nó cung cấp để tải nhé.

Trình duyệt: Mình sẽ dùng một trình duyệt rất phổ biến hiện nay đó là chrome để chạy auto refresh page.

Đã Xong. Bây giờ các bạn làm theo các bước sau.

Bước 1: Truy cập trang Ruby Installer chọn phiên bản 2.1.x để tải về .

Lưu ý : Chọn đúng phần tải về sao cho tương thích với máy tính của bạn.

Bước 2: Sau khi tải về thì ấn hai lần vào và cài như mọi phần mềm khác thôi. có một lưu ý nhỏ là ở bước như trong hình thì bạn tích chọn cả ba ô nhé.

screen-shot-2016-09-30-at-10-46-43-pm

Khi mà bạn check cả ba ô này thì  nó sẽ tự động thêm biến môi trường Enviroment Variables vào hệ thống để chúng ta khỏi mất công làm thủ công bằng tay.

Chờ cho phần mềm chạy xong thì bạn đã cài đặt thành công rồi.

Bây giờ hãy kiểm tra xem phần mềm có hoạt động tốt hay không.

Open chương trình Start Command Prompt With Ruby.

screen-shot-2016-09-30-at-10-50-18-pm

Đánh lệnh  “gem -v” hoặc “sass -v” nếu có xuất hiện mã phiên bản thì bạn đã cài thành công hoàn toàn và chương trình chạy bình thường.

screen-shot-2016-09-30-at-10-50-52-pm

3.Lời kết

Kết thức bài các bạn đã có thể hiểu được SSAS là gì và cách cài đặt SSAS trên windows. Tuy nhiên bài này chỉ dừng lại ở việc cài đătj mà chưa đi chuyên sâu vào lập trình nên các bạn sẽ phải trông chờ vào các bài tiếp theo. Ở các bài tiếp theo mình sẽ hướng dẫn các bạn chi tiết hơn về việc cấu hình Netbeans để auto Generate từ  SCSS sang CSS để sử dụng.

Xem thêm: Các số liệu thống kê trên thiết kế website bán hàng bạn cần nắm rõ

Còn nhiều bài viết hữu ích tại thiết kế web, các bạn đón đọc nhé.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *