Scss so với sass

Khi viết CSS theo cách bình thường, có thể bạn đã chán ngán nhiều thao tác lặp đi lặp lại rất nhạt nhẽo, và bạn mong muốn có một cái gì đó hỗ trợ bạn làm việc với CSS chuyên nghiệp hơn. Nếu như bạn muốn đưa kiến ​​thức CSS của mình lên một tầm cao mới, làm việc chuyên nghiệp thì công cụ đầu tiên bạn cần sử dụng là SASS

SASS là gì?

SASS là CSS Prepocessor (như LESS) giúp bạn viết CSS nhanh hơn và có cấu trúc rõ ràng hơn. Với SASS, bạn có thể viết CSS theo thứ tự rõ ràng, quản lý các biến đã được định sẵn, có thể tự động nén lại tệp CSS để bạn tiết kiệm dung lượng

Lợi ích của SASS mình khó mà có thể nói hết ra đây được, nhưng mình hy vọng bạn sẽ hiểu rằng SASS thú vị như thế nào sau khi làm quen với nó

Nên xem trước. Học CSS toàn tập cơ bản

Cài đặt SASS

Dành cho người thích sử dụng lệnh

SASS là một ứng dụng viết bằng Ruby nên nếu bạn đã quen với việc sử dụng lệnh, thì có thể cài đặt SASS và sử dụng các lệnh của nó. Ở series này mình không nói qua việc này

Tham khảo. http. // sass-lang. com/cài đặt

Sử dụng phần mềm biên dịch SASS

Nếu bạn là người mới, đặc biệt là đang sử dụng Windows thì hãy sử dụng các phần mềm biên dịch SASS như Compass, Koala, Prepros. Ở bài này mình sẽ sử dụng Koala (miễn phí)

Nếu bạn dùng Mac thì có thể sử dụng CodeKit, rất hay

Cách làm việc với SASS

Trước tiên bạn đã tạo ra một thư mục chứa dự án của mình. Trong đó bạn tạo kiểu cho tập tin của mình. scss. Sau đó, bạn cài đặt phần mềm Koala rồi mở lên, nhấn vào nút dấu cộng để thêm thư mục bạn đã tạo vào

Sau đó, bạn thiết lập tệp mà nó sẽ xuất ra bằng cách nhấn chuột phải vào kiểu tệp. scss and select Set Output Path, ở đây bạn sẽ đặt tên tệp để nó xuất ra thành CSS. Ở đây mình đặt tên xuất ra là phong cách. css

Now now you try to open file style. scss up and copy đoạn mã này vào thử, đừng lo lắng nếu bạn chưa hiểu nó vì mình sẽ hướng dẫn sau

.class_1 {

 color: #f94342;

 font-weight: bold;

 padding: 15px;

 margin: 5px;

 a {

 color: #fff;

 text-decoration: underline;

 &:hover,&:visited {

 color: #f3f3f3;

 text-decoration: none;

 }

 }

}

Sau đó ấn lưu. Như vậy mỗi lần bạn chỉnh sửa và lưu kiểu tệp. scss thì nó sẽ tự động chuyển thành style. css

Lúc này, thư mục của bạn sẽ xuất hiện thêm một tệp. css, hãy mở nó ra và bạn nhìn nó sẽ có đoạn mã như thế này (nên xem bằng Notepad++ hoặc các IDE lập trình khác)

Thấy nó đẹp chưa nào, giờ thử so sánh đoạn code CSS xuất ra với đoạn code viết bằng SASS ở trên sẽ thấy mình đã tiết kiệm được rất nhiều thời gian viết rút gọn lại

Dùng IDE làm gì để viết SASS?

Trước hết, mình hoàn toàn phản đối việc viết SASS trên Notepad nhé. Đ. Bạn nên sử dụng một trong các IDE hỗ trợ viết SASS, bạn có thể xem danh sách IDE hỗ trợ SASS. Riêng mình, thì mình dùng Sublime Text 2 có cài SASS để hiển thị đẹp hơn

SASS code information

Về tất cả các quy tắc viết code trong SASS, bạn có thể đọc tại SASS Documentation, ở đây mình chỉ giải thích một số code thông ứng dụng của nó

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

Giả sử bây giờ mình có một đoạn HTML như sau

[html]

[/html]

Bây giờ nếu mình muốn up style cho các thẻ

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

3 và

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

4 của

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

5 mà không ảnh hưởng đến các thẻ khác cùng loại trên trang thì tất nhiên mình sẽ viết đoạn CSS sử dụng vùng chọn như sau

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

Nhìn chung, chúng ta phải viết đi 2 lần lớp

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

5, khá bất tiện nếu như bạn viết nhiều đoạn mã trong một vùng chọn. Nhưng khi bạn viết bằng SASS thì chỉ cần viết như sau

Dĩ nhiên, khi xuất tệp ra. css thì mã như ảnh sẽ xuất ra mã thuần CSS như ở trên

Ngoài ra, bạn có thể thực hiện việc nối một thành phần mẹ (có cấp cao hơn nó 1 bậc) bằng cách thêm dấu & vào trước từng phần tử. Giả sử, mình muốn thêm phong cách cho thuộc tính

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

7 của một liên kết đoạn trong menu, mình sẽ viết như sau ở SASS

Và đây là mã sau khi nó xuất ra định dạng. css

Nghĩa là khi bạn thêm dấu & ở đằng sau một phần tử con nào, thì nó sẽ mang toàn bộ vùng lựa chọn của một phần tử mẹ đứng trước nó một bậc. It is own use to work with the select CSS Pseudo

Use variable (Biến) – $tên-biến

Giờ đây viết CSS chúng ta có thể sử dụng biến với SASS rồi nhé. Đ. Biến là cách mà chúng ta có thể tuyên bố một giá trị nào đó mà chúng ta đã xác định là sẽ sử dụng nó nhiều lần, chẳng hạn như các mã màu, giá trị viền, bóng,…

Để khai báo một biến, chúng ta sẽ viết dấu $ phía sau trước tên biến như thế này

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

8

Sau đó chúng ta sẽ sử dụng biến trong mã bằng cách viết như sau, giả sử như mình lấy giá trị của biến $primary_shadow bỏ vào thẻ text-shadow nhé

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

9

Tất nhiên, sau này bạn gặp bất cứ gặp bất kỳ cái gì mà muốn cho nó thuộc tính text-shadow giống như cái mà bạn đã định sẵn thì chỉ cần thêm

.class_1 {
float: left;
margin: 0px 10px;
}

0 vào đó

Nhưng bạn nên lưu ý, ở biến chúng ta chỉ có thể xác định được giá trị (value) mà sẽ không được sử dụng các thẻ thuộc tính bên trong nó. Còn nếu bạn muốn khai báo nhanh nhiều thuộc tính vào một thành phần thì có thể sử dụng quy tắc mixin

Quy tắc Mixin – @mixin tên_mix

Mixin là một cơ chế khá phổ biến trong SASS mà nếu bạn biết cách áp dụng thì sẽ rất có lợi khi viết CSS. Công dụng của nó mang nhiều thuộc tính mà bạn đã quy ước trong một hỗn hợp nào đó bỏ qua một thành phần bất kỳ mà không cần phải viết lại các thuộc tính đó. Ví dụ, thường khi sử dụng thuộc tính float trong CSS thì chúng ta phải khai báo luôn lề như thế này

.class_1 {
float: left;
margin: 0px 10px;
}

Bây giờ bạn có quá nhiều thành phần cần float trong HTML thì viết lại 2 dòng kia hoài cũng chán. Bây giờ để nhanh, chúng ta sẽ sử dụng mixin cơ chế trong SASS để giải quyết nó. Trước hết, mình sẽ tạo một mixin tên là float-left như sau

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

1

Sau đó, mình muốn chọn một thành phần nào đó có thuộc tính float. left and margin as the kia thì chỉ cần viết như sau. (@include tên_mixin)

.class_1 {
float: left;
margin: 0px 10px;
}

1

Nhưng bây giờ, bạn không muốn sử dụng float. left that is float. phải thì sao? . Mình xin sửa lại code mixin như sau

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

3

Và khi đi include, chúng ta sẽ viết như sau

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

4

Cái này nếu bạn đã học qua khái niệm hàm trong PHP thì hiểu ngay đó mà.   . *

Extends – Kế thừa @extend tên_class

Đây là một tính năng quan trọng mà bạn cần hiểu càng sớm càng tốt vì sau này bạn sẽ sử dụng rất nhiều, nhất là khi làm việc với CSS Framework. Tính năng kế thừa này có nghĩa là bạn chỉ định cho một thành phần nào đó thừa hưởng tất cả các thuộc tính của một lớp (hoặc vùng chọn bất kỳ đó) bất kỳ khi nào bạn đã khai báo sẵn

Ví dụ bây giờ mình có mã tạo nút dài dài ngoằng như sau

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

5

Giả sử, bây giờ mình muốn chọn một lớp nào đó trở thành một nút giống bên trên thì sao? . Nhưng như thế sẽ khá rắc rối vì mình phải tiến hành đi tìm lại phần này và viết vào, hoặc sẽ mở mã HTML ra và viết thêm một lớp cho nó, nhưng cũng khá hơn. Nhưng ở SASS, mình sẽ có thể làm nhanh gọn lẹ chỉ với vài dòng ngắn gọn nhất thế này

.class_1 {
float: left;
margin: 0px 10px;
}

3

Đấy, giờ thì thằng

.class_1 {
float: left;
margin: 0px 10px;
}

4 đã thành một nút nhấn giống như

.class_1 {
float: left;
margin: 0px 10px;
}

5 rồi. Bạn sợ file CSS sẽ nặng ra á?

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

0

Hãy nhớ rằng, cho dù bạn sử dụng @extend ở bất kỳ nơi nào miễn phí trong cùng một tệp, thì nó sẽ tự động gom lại và đưa vào một dòng duy nhất. Ví dụ như thế này

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

1

Sau khi xuất ra nó sẽ như thế này

Hãy nhớ kỹ 1 điều, nếu bạn làm việc trên CSS Framework thì nên áp dụng extension vào, sau đó viết thêm class vào code HTML để đỡ phải nhìn vào.   . Gì

Bạn có thể cho phép nó mở rộng nhiều lớp bằng cách viết nhiều đoạn mở rộng vì phần mở rộng không cho phép bạn thực hiện trên nhiều lớp.   . rất tốt

Nhưng hãy thử đặt một trường hợp sau, nếu cái. button_1 ở trên không được sử dụng, dĩ nhiên, nó vẫn được hiển thị ra bên ngoài tệp. css, sẽ không tốt vì có thể sau này bạn có quá nhiều lớp thừa thì nó sẽ mọc ra. Do đó, cách nào vẫn để nó ở đó nhưng sẽ không được xuất ra tệp. css which it only export when being expand? . name for class and #name for ID of CSS)

Vùng chọn %name

Vùng chọn

.class_1 {
float: left;
margin: 0px 10px;
}

6 nó cũng giống như. name và #name trong CSS, chỉ có điều khi bạn khai báo một lớp %name thì nó sẽ không xuất ra tệp CSS mà chỉ xuất ra khi bạn tiến hành mở rộng nó. You write this phase to file SASS

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

4

Sau đó thử lưu lại, nó sẽ không xuất hiện nữa. Nhưng nếu bây giờ bạn tiến hành mở rộng nó cho một lớp nào đó thì nó sẽ được xuất ra

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

0

Hai đứa fu*k nhau thì kiểu gì chả xuất, nhể? .   . gợi cảm

Các đề điều kiện trong SASS

CSS cũng có mệnh đề chứ chả đùa đâu nhé. Đ. Trong SASS có rất nhiều mệnh đề điều kiện khác nhau, nhưng ở đây mình chỉ đề cập đến mệnh đề NẾU thôi vì nó thông minh và dễ hiểu. Còn các điều kiện như FOR, EACH, WHILE thì bạn có thể tham khảo tại đây

Điều kiện IF

Điều kiện NẾU được sử dụng để kiểm tra giá trị của một biến bất kỳ trong SASS bằng các lệnh toán tử (như bao ngôn ngữ lập trình khác). Hãy nhớ rằng điều kiện NẾU chỉ có thể sử dụng để kiểm tra giá trị của một biến. Cái này bạn sẽ gặp nhiều khi sử dụng CSS Framework hơn là phổ biến

Bây giờ, hãy giả thuyết rằng vì một lý do nào đó, chúng tôi không muốn xuất đoạn SASS nào ra CSS nhưng sẽ không cần xóa nó, và sau đó nếu chúng tôi muốn có thể dễ dàng bật nó lên. Bây giờ mình sẽ tiến hành tạo một biến để điều khiển như thế này

.class_1 {
float: left;
margin: 0px 10px;
}

8

Sau đó mình sẽ viết điều kiện NẾU như sau

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

1

Đoạn này có nghĩa là nếu biến

.class_1 {
float: left;
margin: 0px 10px;
}

9 có giá trị bằng

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

10 thì nó sẽ xuất các đoạn CSS của thẻ. button_1 ra, but if value which other

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

10 thì will not doing anything both. Bạn thử lưu lại sẽ không thấy nó xuất ra cái gì ra cả, nhưng nếu đổi

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

12 thì nó sẽ xuất ra cho bạn xem

Bạn vẫn có thể sử dụng

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

13 nếu muốn có thêm một hành động khác được thực hiện nếu giá trị kiểm tra bị sai, kiểu như

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

2

Đoạn này có nghĩa là nếu giá trị mà không phải là

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

10 thì nó sẽ xuất đoạn CSS của

.menu_container ul { background: black; }
.menu_container ul li {color: red; }

15 ra CSS

Lời kết

Tới đây thì mình nghĩ bạn đã nắm được cơ bản SASS rồi, và thực ra SASS cũng chỉ có vậy và thêm nhiều mã lệnh nữa mà bạn có thể đọc thêm ở phần tài liệu của nó. Một lần nữa, nếu bạn đã có kinh nghiệm sử dụng CSS rồi thì mình khuyên bạn nên áp dụng SASS vào công việc viết mã ngay vì

• Sẽ dễ dàng quản lý và chỉnh sửa sau này
• Code CSS được xuất ra theo quy chuẩn, đẹp, người khác dễ đọc
• Dễ dàng nén lại thành định dạng thu nhỏ để tăng tốc trang web, cái này mình sẽ hướng dẫn ở bài sau
• Dễ dàng làm việc với CSS Framework
• Dễ dàng phát triển một Framework riêng cho chính bản thân mình để thuận tiện sử dụng

Ngay sau bài viết này, mình sẽ chia sẻ cho các bạn một số kinh nghiệm và thủ thuật sử dụng SASS để có thể làm việc hiệu quả hơn, vì bài viết này tới đây khá dài rồi.   . từ biệt

Do mình đã làm việc với SASS một thời gian vài tháng rồi nên ít nhiều gì cũng có thể hỗ trợ các bạn tốt, vì vậy hãy đặt câu hỏi nào mà bạn đang thắc mắc ở phần bình luận và mình sẽ giải đáp thêm cho riêng mình