SASS LÀ GÌ

  -  

Làm vấn đề với CSS là việc thường xuyên của đa số thể loại dev :v. Có khi nào chúng ta thấy ngán cách viết CSS "chay" nhưng chúng ta vẫn vẫn viết hay ngày? Có phương pháp như thế nào nhằm viết CSS một bí quyết chuyên nghiệp hóa hơn không ? Có đấy, thuộc mày mò trong nội dung bài viết này nhé.

Bạn đang xem: Sass là gì

*

CSS Preprocessor là gì?

CSS Preprocessors là ngôn ngữ chi phí xử trí CSS. Nó tất cả tác dụng sẽ giúp đỡ bạn viết một cú pháp CSS ngay sát nhau với cùng một ngôn từ xây dựng rồi compile nó ra CSS thuần.

Có không hề ít CSS Preprocessor nlỗi SASS, LESS, Stylus.... Tuy nhiên vào độ lớn bài viết này, mình sẽ trình làng chúng ta về SASS.

Nếu bạn đã nghe biết Typescript - javascript Preprocessor thì chức năng của SASS cũng giống như Typescript vậy đó.

Cùng khám phá coi nó thế nào nhé.

Xem thêm: Mạng Twoo Là Gì - Cảnh Báo: Các Trường Hợp Lừa Đảo Trên Twoo Là Gì

SASS là gì?

SASS (Syntactically Awesome StyleSheets) là một trong CSS Preprocessor giúp đỡ bạn viết CSS nhanh hơn cùng có cấu trúc cụ thể hơn. Với SASS, bạn có thể viết CSS theo máy từ bỏ rõ ràng, thống trị các vươn lên là đã làm được quan niệm sẵn, các class sử dụng tầm thường tốt rất có thể tự động nén tập tin CSS lại nhằm các bạn tiết kiệm dung lượng.

*

SCCS là gì?

SASS được thiết kế với viết vì những lập trình viên Ruby. Như vậy, Sass stylesheets thực hiện cú pháp hệt như Ruby với vấn đề không tồn tại những vệt ngoặc nhọn , vết chấm phẩy, Việc viết CSS như vậy không "gần" CSS thuần cho nên việc hiểu và gọi code SASS cực kỳ khó đọc, loại nlỗi này:

.title color= #fff; font-size= 50px;Sass y hệt như vậy cho đến Lúc phiên phiên bản 3.0 được xuất bản vào tháng 5/2010, nó trình làng một cú pháp bắt đầu được call là SCSS (Sassy CSS). Cú pháp này nhằm mục đích thu bé nhỏ khoảng cách thân Sass và CSS bằng phương pháp mang đến một cú pháp thân mật cùng với CSS.

Hiểu một cách dễ dàng, SCSS là 1 trong những bản upgrade của SASS góp họ viết CSS một biện pháp dễ dãi với dễ dàng nắm bắt rộng.

Xem thêm: Công Cụ Supersu Dành Cho Android Là Gì Và Nó Dùng Để Làm Gì? Androidhelp

Ok, let"s gooooooooooo !!!

Quy tắc xếp ck (Nested Rule)

lấy ví dụ như bản thân có một quãng HTML như sau

div class="container"> div class="row"> div class="navbar col-12"> a class="brand">hoidapthutuchaiquan.vna> ul class="menu"> li>a href="#">Menu 1a>li> li>a href="#">Menu 2a>li> ul> div> div>div>Giả sử bạn chỉ mong mỏi CSS cho thẻ ul cùng với class thực đơn, cùng với CSS thuần bạn viết

.navbar ul.menu list-style: none;Nếu chúng ta thường xuyên ý muốn CSS mang lại thẻ li vào thẻ ul (có class là menu) thì

.navbar ul.thực đơn li padding: 5px;Rồi chúng ta lại liên tiếp hy vọng CSS cho thẻ a trong thẻ li... thì cđọng yêu cầu viết lặp đi lặp lại thương hiệu tag (hoặc class, hoặc id) phụ vương của thẻ muốn css thì hết sức rất buộc phải không như thế nào ?

Nested Rule của SASS xuất hiện để giúp đỡ chúng ta làm cho điều trên một giải pháp đơn giản dễ dàng hơn.

Cú pháp viết nhỏng sau:

.navbar ul.thực đơn list-style: none; li padding: 5px; a text-decoration: none; Và sau khoản thời gian được đoạn SASS trên được compile ra CSS thuần sẽ nhỏng sau:

.navbar ul.thực đơn list-style: none;.navbar ul.thực đơn li padding: 5px;.navbar ul.menu li a text-decoration: none;Thực tế nguyên tắc xếp ck được sử dụng hết sức nhiều khi vào 1 project gồm viết css bởi SASS

*

Laravel Mix

Nếu bạn đang thao tác cùng với project Laravel thì chúng ta chẳng yêu cầu cho ứng dụng trang bị 3 nữa bởi Laravel đã tích hợp một điều khoản Gọi là Laravel Mix cùng với rất nhiều anh tài, có thể compile những CSS Preprocessor sang trọng CSS thuần là một trong số những anh tài tuyệt ho của chính nó.Kết luận

Trên đây mình đã reviews bạn một số cú pháp thường xuyên dùng làm viết CSS bởi SASS/SCSS. Sẽ còn các cú pháp không giống nữa mình còn chưa kịp reviews vào bài viết này, nếu bạn muốn với hy vọng hiểu sâu về nó nữa thì rất có thể xem thêm trên phía trên. Nhưng mình suy nghĩ nhiêu phía trên chúng ta cũng đầy đủ chiến rồi đấy

*
)

Nếu bạn sẽ hiểu bài này đến phía trên rồi thì bản thân khuyên thực lòng là chớ viết CSS "chay" nữa nhé (tất cả cùng với dev Back-end), hãy viết SASS ngay lập tức với luôn luôn.

*