Làm việc với CSS là việc thường xuyên của số đông thể loại dev :v. Có bao giờ bạn thấy chán cách viết CSS "chay" mà bạn vẫn đã viết thường xuyên ngày? tất cả cách nào để viết CSS một cách chuyên nghiệp hóa hơn không ? có đấy, cùng 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 từ tiền xử trí CSS. Nó có tác dụng sẽ giúp cho bạn viết một cú pháp CSS ngay sát nhau với một ngôn từ lập trình rồi compile nó ra CSS thuần.

Có tương đối nhiều CSS Preprocessor như SASS, LESS, Stylus.... Mặc dù trong khuôn khổ bài viết này, mình sẽ trình làng bạn về SASS.

Nếu chúng ta đã nghe biết Typescript - javascript Preprocessor thì chức năng của SASS cũng tương tự Typescript vậy đó.

Cùng tìm hiểu xem nó ra làm sao nhé.

SASS là gì?

SASS (Syntactically Awesome StyleSheets) là một trong những CSS Preprocessor giúp cho bạn viết CSS cấp tốc hơn cùng có kết cấu rõ ràng hơn. Cùng với SASS, chúng ta cũng có thể viết CSS theo vật dụng tự rõ ràng, làm chủ các biến hóa đã được định nghĩa sẵn, các class dùng thông thường hay gồm thể tự động hóa nén tập tin CSS lại để bạn tiết kiệm dung lượng.

*

SCCS là gì?

SASS có phong cách thiết kế và viết bởi các lập trình viên Ruby. Do vậy, Sass stylesheets áp dụng cú pháp y như Ruby cùng với việc không có các dấu ngoặc nhọn , lốt chấm phẩy, vấn đề viết CSS do vậy không "gần" CSS thuần cho nên việc hiểu cùng đọc code SASS rất nặng nề hiểu, loại như này:

.title color= #fff; font-size= 50px;Sass hệt như vậy cho tới khi phiên bạn dạng 3.0 được phân phát hành trong thời điểm tháng 5/2010, nó giới thiệu một cú pháp mới được điện thoại tư vấn là SCSS (Sassy CSS). Cú pháp này nhằm mục đích thu hẹp khoảng cách giữa Sass và CSS bằng phương pháp mang tới một cú pháp thân mật và gần gũi với CSS.

Hiểu 1 cách đơn giản, SCSS là một bạn dạng nâng cấp của SASS giúp bọn họ viết CSS một cách thuận lợi và dễ dàng nắm bắt hơn.

Xem thêm: Arb Là Gì ? Định Nghĩa, Ví Dụ, Giải Thích Nghĩa Của Từ Arb

Ok, let"s gooooooooooo !!!

Quy tắc xếp ông xã (Nested Rule)

Ví dụ mình bao gồm một đoạn HTML như sau

div class="container"> div class="row"> div class="navbar col-12"> a class="brand">amiralmomenin.neta> ul class="menu"> li>a href="#">Menu 1a>li> li>a href="#">Menu 2a>li> ul> div> div>div>Giả sử các bạn chỉ hy vọng CSS mang lại thẻ ul với class menu, với CSS thuần chúng ta viết

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

.navbar ul.menu li padding: 5px;Rồi các bạn lại thường xuyên muốn CSS đến thẻ a vào thẻ li... Thì cứ phải viết lặp đi tái diễn tên tag (hoặc class, hoặc id) phụ vương của thẻ mong css thì vô cùng cực nên không như thế nào ?

Nested Rule của SASS sinh ra để giúp bạn có tác dụng điều bên trên một cách đơn giản hơn.

Cú pháp viết như sau:

.navbar ul.menu list-style: none; li padding: 5px; a text-decoration: none; Và sau thời điểm được đoạn SASS trên được compile ra CSS thuần đang như sau:

.navbar ul.menu list-style: none;.navbar ul.menu li padding: 5px;.navbar ul.menu li a text-decoration: none;Thực tế phép tắc xếp ck được sử dụng rất đôi khi vào 1 project bao gồm viết css bằng SASS

*

Laravel Mix

Nếu các bạn đang làm việc với project Laravel thì chúng ta chẳng bắt buộc đến phần mềm thứ 3 nữa vị Laravel đã tích hợp một phương pháp gọi là Laravel set với rất nhiều tính năng, hoàn toàn có thể compile những CSS Preprocessor thanh lịch CSS thuần là giữa những tính năng tốt ho của nó.Kết luận

Trên đây mình đã reviews bạn 1 số ít cú pháp thường dùng để viết CSS bởi SASS/SCSS. Vẫn còn các cú pháp không giống nữa mình không kịp trình làng trong bài viết này, nếu bạn có nhu cầu và mong muốn hiểu sâu về nó nữa thì có thể bài viết liên quan tại đây. Nhưng mình nghĩ nhiêu đây bạn cũng đủ chiến rồi đấy

*
)

Nếu chúng ta đã đọc bài bác này mang lại đây rồi thì bản thân khuyên thật tình là chớ viết CSS "chay" nữa đó (kể cả với dev Back-end), hãy viết SASS ngay với luôn.

*