Sass/scss là gì?

Làm việc với CSS là câu hỏi thường xuyên của đầy đủ thể loại dev :v. Có lúc nào chúng ta thấy chán giải pháp viết CSS "chay" mà bạn vẫn đang viết hay ngày? Có biện pháp nào để viết CSS một bí quyết chuyên nghiệp rộng không ? Có đấy, cùng khám phá vào nội dung bài viết này nhé.

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

*

CSS Preprocessor là gì?

CSS Preprocessors là ngôn từ tiền cách xử trí CSS. Nó bao gồm tính nă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ữ điệu thiết kế 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 kích thước bài viết này, bản thân vẫn trình làng bạn về SASS.

Nếu các bạn đã nghe biết Typescript - javascript Preprocessor thì tính năng của SASS cũng tương tự Typescript vậy đó.

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

Xem thêm: Tổng Kho Máy Phát Điện Chính Hãng Nhật Bản, Máy Phát Điện Honda Thái Lan

SASS là gì?

SASS (Syntactically Awesome StyleSheets) là 1 trong CSS Preprocessor khiến cho bạn viết CSS nkhô giòn hơn cùng gồm cấu tạo ví dụ rộng. Với SASS, chúng ta có thể viết CSS theo đồ vật tự cụ thể, làm chủ những biến chuyển đã có được có mang sẵn, những class dùng bình thường tốt rất có thể auto nén tập tin CSS lại nhằm các bạn tiết kiệm ngân sách dung lượng.

*

SCCS là gì?

SASS được thiết kế theo phong cách cùng viết do các lập trình viên Ruby. Bởi vậy, Sass stylesheets sử dụng cú pháp giống như Ruby cùng với bài toán không có các vệt ngoặc nhọn , lốt chnóng phẩy, việc viết CSS như thế ko "gần" CSS thuần nên việc đọc với phát âm code SASS hết sức khó khăn gọi, hình dáng như này:

.title color= #fff; font-size= 50px;Sass giống như vậy cho đến Khi phiên bạn dạng 3.0 được xây cất vào tháng 5/2010, nó ra mắt một cú pháp new được call là SCSS (Sassy CSS). Cú pháp này nhằm mục đích thu nhỏ nhắn khoảng cách giữa Sass và CSS bằng cách mang tới một cú pháp thân thiết cùng với CSS.

Hiểu một cách dễ dàng, SCSS là 1 trong bạn dạng upgrade của SASS góp bọn họ viết CSS một bí quyết tiện lợi với dễ hiểu hơn.

Ok, let"s gooooooooooo !!!

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

ví dụ như bản thân tất cả một đoạn HTML nhỏng sau

div class="container"> div class="row"> div class="navbar col-12"> a class="brand">dramrajani.coma> 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ỉ ước ao CSS mang đến thẻ ul với class menu, cùng với CSS thuần các bạn viết

.navbar ul.thực đơn list-style: none;Nếu bạn liên tiếp ý muốn CSS đến thẻ li trong thẻ ul (bao gồm class là menu) thì

.navbar ul.menu li padding: 5px;Rồi các bạn lại tiếp tục hy vọng CSS mang đến thẻ a trong thẻ li... thì cứ đọng buộc phải viết lặp đi tái diễn tên tag (hoặc class, hoặc id) cha của thẻ ước ao css thì vô cùng rất cần không như thế nào ?

Nested Rule của SASS sinh ra sẽ giúp các bạn làm điều bên trên một giải pháp dễ dàng và đơn giản 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 khi được đoạn SASS trên được compile ra CSS thuần sẽ nhỏng sau:

.navbar ul.menu list-style: none;.navbar ul.thực đơn li padding: 5px;.navbar ul.menu li a text-decoration: none;Thực tế phép tắc xếp ông chồng được sử dụng vô cùng thỉnh thoảng vào 1 project bao gồm viết css bằng SASS

*

Laravel Mix

Nếu ai đang làm việc cùng với project Laravel thì chúng ta chẳng nên cho ứng dụng sản phẩm 3 nữa vày Laravel đã nhập vào một qui định hotline là Laravel Mix cùng với tương đối nhiều kĩ năng, rất có thể compile những CSS Preprocessor sang CSS thuần là 1 trong số những tài năng hay ho của nó.Kết luận

Trên trên đây tôi đã reviews chúng ta 1 số ít cú pháp thường dùng để làm viết CSS bằng SASS/SCSS. Sẽ còn những cú pháp không giống nữa bản thân chưa kịp giới thiệu vào nội dung bài viết này, nếu như bạn muốn cùng ý muốn phát âm sâu về nó nữa thì hoàn toàn có thể tham khảo thêm tại đây. Nhưng mình nghĩ nhiêu phía trên các bạn cũng đầy đủ chiến rồi đó

*
)

Nếu chúng ta đang hiểu bài bác này cho phía trên rồi thì mình khulặng thực tình là chớ viết CSS "chay" nữa đấy (kể cả cùng với dev Back-end), hãy viết SASS ngay với luôn luôn.

*