SASS Là Gì? – Chúng Ta Hãy Đi Tìm Hiểu SASS Là Gì? – hoidaplagi

SASS là gì?: Sass là ngôn ngữ biểu định kiểu được thiết kế ban đầu bởi Hampton Catlin và được phát triển bởi Natalie Weizenbaum.

SASS là gì?

Sass là viết tắt của cụm Syntactically Awesome Style Sheets ( Style Sheet có cú pháp ảo diệu , đại loại thế ) được thiết kế ra bởi Hampton Catlin và do Natalie Weizenbaum lập trình.

Sass là ngôn ngữ kịch bản tiền xử lý được diễn giải hoặc biên dịch thành Cascading Style Sheets (CSS). SassScript là ngôn ngữ kịch bản. Sass bao gồm hai cú pháp. Cú pháp ban đầu, được gọi là “cú pháp thụt lề”, sử dụng cú pháp tương tự Haml.

Bạn đã biết: Link là gì chưa?

 Nó sử dụng thụt lề để tách các khối mã và dòng mới các ký tự để quy tắc riêng biệt. Cú pháp mới hơn, “SCSS” (Sassy CSS), sử dụng định dạng khối như của CSS. Nó sử dụng dấu ngoặc nhọn để biểu thị các khối mã và dấu chấm phẩy để phân tách các quy tắc trong một khối. Cú pháp thụt lề và các tệp SCSS theo truyền thống được cung cấp các phần mở rộng .sass và .scss, tương ứng.

Cài đặt SASS trên Window.

Editor: Mình sử dụng Netbeans vì nó có hỗ trợ Auto Refresh trang web khi lưu và hỗ trợ tự động biên dịch file SCSS thành file CSS. Điều này không chỉ có Netbeans mới làm được mà một số editor khác như Sublime Text cũng có thể làm được nhưng mình chọn Netbeans vì mình thích nó hơn. Bạn có thể download và cài đặt tại trang chủ của nó, chọn version mới nhất 8.1x luôn nhé. Trong quá trình cài đặt nếu nó đòi cài thêm một java jdk nữa thì hãy vào link mà nó yêu cầu để download và cài đặt nhé.

Browser: Mình sử dụng trình duyệt mặc định là Chrome để chạy auto refresh page.

Ok, bây giờ bạn thực hiện các bước như sau:

Bước 1: Bạn vào trang Ruby Installer và chọn Version là 2.1.x để download. Lưu ý là nhớ chọn phiên bản tương thích với hệ điều hành của bạn.

Bước 2: Sau khi download về bạn click double vào và cài như một phần mềm bình thường. Tuy nhiên có một lưu ý là ở bước như hình dưới đây bạn phải check chọn cả ba options nhé.

Lý do bạn phải check ba options đó là 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.

Ok vậy là bạn đã cài đặt xong, bây giờ chúng ta cần kiểm tra xem đã cài đặt chưa.

Bước 3: Kiểm tra xem đã cài đặt thành công chưa.

Bạn mở chương trình Start Command Prompt With Ruby lên.

Sau đó gõ vào lệnh “gem -v” hoặc “sass -v” nếu xuất hiện Version thì tức là bạn đã cài đặt thành công.

Xem thêm: Netflix Là Gì ? – Hãy Đi Tìm Hiểu Ưu Điểm Nhược Điểm Của Nó

Ưu điểm của Sass.

Mặc dù cú pháp này có thể trông khá lạ, nhưng nó có một vài điểm khá thú vị. Đầu tiên, nó ngắn và dễ dàng đánh máy hơn.Không cần dấu ngoặc nhọn và chấm phẩy. Thậm chí còn tốt hơn nữa, khi không cần @mixin hoặc @include, bạn chỉ cần một ký tự là đủ: : và +.

Cú pháp Sass bắt buộc code theo các chuẩn dựa trên thụt đầu dòng. Vì vậy sau một thụt đầu dòng có thể làm hỏng cả .sass stylesheet, nó đảm bảo rằng code phải rõ ràng và được định dạng tốt.

Nhưng hãy cẩn thận! Thụt đầu dòng có một vài ý nghĩa trong Sass. Khi thụt đầu dòng một bộ chọn (selector), có nghĩa là nó được lồng trong bộ chọn trước đó.

Chỉ cần một thao tác đơn giản là thụt đầu dòng .element-b vào một level, nó sẽ trở thành con của .element-a, điều này thay đổi code CSS sau khi biên dịch. Vì vậy, hãy cẩn thận với thụt đầu dòng.

Kết luận: Thông qua nội dung bổ ích trên HOIDAPLAGI chắc hẳn các bạn đã hiểu SASS là gì và cách sử dụng SASS như thế nào rồi đúng không. Chúc các bạn thực hiện thành công.

Chúng tôi cung cấp: Dịch vụ thiết kế website tại thanh hóa chuyên nghiệp chất lượng