12/08/2018, 18:06

SASS và 5 tính năng chính của SASS

SASS là gì? SASS là một CSS Prepocessor. phải qua một bộ lọc thì SASS hoặc SCSS mới sáng css bình thường. Có 2 loại đuôi mà SASS hỗ trợ đó là: sass và scss Lưu file theo kiểu SASS thì rất chi tiết về dấu tab cũng như space. Bởi vậy nên thường lưu file theo dạng đuôi là scss. Tại ...

SASS là gì?

SASS là một CSS Prepocessor.
phải qua một bộ lọc thì SASS hoặc SCSS mới sáng css bình thường.
Có 2 loại đuôi mà SASS hỗ trợ đó là: sass và scss
Lưu file theo kiểu SASS thì rất chi tiết về dấu tab cũng như space.
Bởi vậy nên thường lưu file theo dạng đuôi là scss.

Tại sao nên sử dụng SASS?

Bình thường trước đây ta mà muốn chia 1 đoạn div 1000px chẳng hạn thành 2 div, mỗi div cách nhau khoảng 50px thì khi đó ta lại phải dùng máy tính bấm "1000-50/2" suy ra mỗi div sẽ rộng là 475px. Tuy nhiên với SASS thì không cần phải viết làm như vậy bạn chỉ cần trừ và chia đôi nó. Đây chỉ là một trong 5 tính năng chính của SASS.

Note: nó có thể đem lập trình dung nhập vào css. Tự động nén tập tin CSS lại để bạn tiết kiệm dung lượng.

Cài đặt SASS

Cài đặt ruby: sudo apt install ruby

Sau đó, cài đặt sass: sudo gem install sass

Nếu bị lỗi hãy thử cài đặt: sudo apt-get install ruby-dev rồi cài lại lặp lại câu lệnh trên, lý do vì gói này chứa các tệp tiêu đề cần thiết cho các thư viện mở rộng cho Ruby.

File .sass không cần phải có dấu {}, không cần dấu ";" cuối câu nhưng hãy lưu ý dấu tab và dấu cách khi làm việc với file .sass bởi vì nó xử lý rất kỹ về vấn đề này, chỉ cần sai 1 dấu tab hoặc 1 dấu cách là chương trình lỗi.

file test.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel=stylesheet" href="test.css">
</head>
<body>
    <h2>Demo về SASS</h2>
</body>
</html>

Note: Các bạn hãy nhớ kỹ là link tới file có đuôi là .css nhá chứ không phải .sass hay .scss không lát nữa lại phải quay lên xem lại đấy

Bình luận về bài viết này

Hoàng Hải Đăng

24 chủ đề

7226 bài viết

SASS và 5 tính năng chính của SASS

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI