Bộ chọn nhiều lớp css
Trước khi bạn có thể sử dụng Sass, bạn cần thiết lập nó trong dự án của mình. Nếu bạn chỉ muốn duyệt ở đây, hãy tiếp tục, nhưng chúng tôi khuyên bạn nên cài đặt Sass trước. Truy cập vào đây nếu bạn muốn tìm hiểu cách thiết lập mọi thứ Show Sơ chếBản thân CSS có thể thú vị, nhưng biểu định kiểu ngày càng lớn hơn, phức tạp hơn và khó bảo trì hơn. Đây là lúc một bộ tiền xử lý có thể trợ giúp. Sass có các tính năng chưa có trong CSS như lồng ghép, hỗn hợp, kế thừa và các tính năng tiện lợi khác giúp bạn viết CSS mạnh mẽ, có thể bảo trì Sau khi bạn bắt đầu mày mò với Sass, nó sẽ lấy tệp Sass đã xử lý trước của bạn và lưu dưới dạng tệp CSS bình thường mà bạn có thể sử dụng trong trang web của mình Cách trực tiếp nhất để thực hiện điều này là trong thiết bị đầu cuối của bạn. Sau khi cài đặt Sass, bạn có thể biên dịch Sass của mình thành CSS bằng lệnh 2. Bạn sẽ cần cho Sass biết nên xây dựng tệp nào và xuất CSS sang đâu. Ví dụ: chạy 3 từ thiết bị đầu cuối của bạn sẽ lấy một tệp Sass duy nhất, 4 và biên dịch tệp đó thành 5Bạn cũng có thể xem các tệp hoặc thư mục riêng lẻ có cờ 6. Cờ theo dõi yêu cầu Sass xem các tệp nguồn của bạn để biết các thay đổi và biên dịch lại CSS mỗi khi bạn lưu Sass của mình. Nếu bạn muốn xem (thay vì tạo thủ công) tệp 4 của mình, bạn chỉ cần thêm cờ theo dõi vào lệnh của mình, như vậy
Bạn có thể xem và xuất ra các thư mục bằng cách sử dụng đường dẫn thư mục làm đầu vào và đầu ra của mình, đồng thời phân tách chúng bằng dấu hai chấm. Trong ví dụ này
Sass sẽ xem tất cả các tệp trong thư mục 8 để biết các thay đổi và biên dịch CSS sang thư mục 9💡 Sự thật thú vịSass có hai cú pháp. Cú pháp SCSS ( 00) được sử dụng phổ biến nhất. Đó là một siêu bộ CSS, có nghĩa là tất cả CSS hợp lệ cũng là SCSS hợp lệ. Cú pháp thụt lề ( 01) khác thường hơn. nó sử dụng dấu thụt đầu dòng thay vì dấu ngoặc nhọn để lồng các câu lệnh và dòng mới thay vì dấu chấm phẩy để phân tách chúng. Tất cả các ví dụ của chúng tôi đều có sẵn ở cả hai cú phápBiếnHãy nghĩ về các biến như một cách để lưu trữ thông tin mà bạn muốn sử dụng lại trong toàn bộ biểu định kiểu của mình. Bạn có thể lưu trữ những thứ như màu sắc, ngăn xếp phông chữ hoặc bất kỳ giá trị CSS nào mà bạn cho rằng mình sẽ muốn sử dụng lại. Sass sử dụng ký hiệu 02 để biến một thứ gì đó thành một biến. Đây là một ví dụSCSS Cú pháp
Cú pháp Sass 0Đầu ra CSS 5Khi Sass được xử lý, nó sẽ nhận các biến mà chúng tôi xác định cho _______103 và 04 và xuất ra CSS bình thường với các giá trị biến của chúng tôi được đặt trong CSS. Điều này có thể cực kỳ hiệu quả khi làm việc với màu sắc thương hiệu và giữ cho chúng nhất quán trên toàn bộ trang weblàm tổKhi viết HTML, bạn có thể nhận thấy rằng nó có một hệ thống phân cấp hình ảnh và lồng nhau rõ ràng. Mặt khác, CSS không Sass sẽ cho phép bạn lồng các bộ chọn CSS theo cách tuân theo cùng một hệ thống phân cấp trực quan trong HTML của bạn. Xin lưu ý rằng các quy tắc được lồng ghép quá mức sẽ dẫn đến CSS quá đủ tiêu chuẩn có thể khó duy trì và thường được coi là phương pháp không tốt Với ý nghĩ đó, đây là ví dụ về một số phong cách điển hình cho điều hướng của một trang web SCSS Cú pháp 8Cú pháp Sass 9Đầu ra CSS 0Bạn sẽ nhận thấy rằng bộ chọn 05, 06 và 07 được lồng bên trong bộ chọn 08. Đây là một cách tuyệt vời để tổ chức CSS của bạn và làm cho nó dễ đọc hơnmột phầnBạn có thể tạo một phần tệp Sass chứa các đoạn CSS nhỏ mà bạn có thể đưa vào các tệp Sass khác. Đây là một cách tuyệt vời để mô-đun hóa CSS của bạn và giúp duy trì mọi thứ dễ dàng hơn. Một phần là tệp Sass được đặt tên với dấu gạch dưới ở đầu. Bạn có thể đặt tên nó là gì đó như 09. Dấu gạch dưới cho Sass biết rằng tệp này chỉ là tệp một phần và nó không được tạo thành tệp CSS. Sass partials được sử dụng với quy tắc 50mô-đunHiện chỉ có Dart Sass hỗ trợ 50. Thay vào đó, người dùng của các triển khai khác phải sử dụng quy tắc 52Bạn không cần phải viết tất cả Sass của mình trong một tệp. Bạn có thể chia nó theo bất kỳ cách nào bạn muốn với quy tắc 50. Quy tắc này tải một tệp Sass khác dưới dạng một mô-đun, nghĩa là bạn có thể tham chiếu đến các biến, mixin và hàm của nó trong tệp Sass của mình bằng một không gian tên dựa trên tên tệp. Việc sử dụng một tệp cũng sẽ bao gồm CSS mà nó tạo ra trong đầu ra được biên dịch của bạnSCSS Cú pháp 0 1Cú pháp Sass 0 1Đầu ra CSS 2Lưu ý rằng chúng tôi đang sử dụng 54 trong tệp 55. Khi sử dụng một tệp, bạn không cần thêm phần mở rộng của tệp. Sass rất thông minh và sẽ tìm ra điều đó cho bạnhỗn hợpViết một số thứ trong CSS hơi tẻ nhạt, đặc biệt là với CSS3 và có nhiều tiền tố của nhà cung cấp. Mixin cho phép bạn tạo các nhóm khai báo CSS mà bạn muốn sử dụng lại trên toàn bộ trang web của mình. Nó giúp giữ cho Sass của bạn rất KHÔ. Bạn thậm chí có thể chuyển các giá trị để làm cho mixin của bạn linh hoạt hơn. Đây là một ví dụ cho 56SCSS Cú pháp 3Cú pháp Sass 4Đầu ra CSS 5Để tạo mixin, bạn sử dụng chỉ thị 57 và đặt tên cho nó. Chúng tôi đã đặt tên cho mixin của mình là 56. Chúng tôi cũng đang sử dụng biến 59 bên trong dấu ngoặc đơn để chúng tôi có thể chuyển vào một 56 bất cứ thứ gì chúng tôi muốn. Sau khi tạo mixin, bạn có thể sử dụng mixin đó làm tuyên bố CSS bắt đầu bằng 81 theo sau là tên của mixinMở rộng/Kế thừaViệc sử dụng 82 cho phép bạn chia sẻ một tập hợp các thuộc tính CSS từ bộ chọn này sang bộ chọn khác. Trong ví dụ của chúng tôi, chúng tôi sẽ tạo một chuỗi thông báo đơn giản về lỗi, cảnh báo và thành công bằng cách sử dụng một tính năng khác đi đôi với các lớp giữ chỗ mở rộng. Lớp trình giữ chỗ là một loại lớp đặc biệt chỉ in khi nó được mở rộng và có thể giúp giữ cho CSS đã biên dịch của bạn gọn gàng và sạch sẽSCSS Cú pháp 6Cú pháp Sass 7Đầu ra CSS 8Tác dụng của đoạn mã trên là yêu cầu ________ 183, ________ 184, ________ 185, và ________ 186 hành xử giống như 87. Điều đó có nghĩa là bất cứ nơi nào có 87 xuất hiện, thì 83, 84, 85 và 86 cũng sẽ xuất hiện. Điều kỳ diệu xảy ra trong CSS được tạo, trong đó mỗi lớp này sẽ có các thuộc tính CSS giống như 87. Điều này giúp bạn tránh phải viết nhiều tên lớp trên các phần tử HTMLBạn có thể mở rộng hầu hết các bộ chọn CSS đơn giản ngoài các lớp trình giữ chỗ trong Sass, nhưng sử dụng trình giữ chỗ là cách dễ nhất để đảm bảo rằng bạn không mở rộng một lớp được lồng ở nơi khác trong kiểu của bạn, điều này có thể dẫn đến các bộ chọn ngoài ý muốn trong CSS của bạn Xin lưu ý rằng CSS trong 94 không được tạo vì 94 không bao giờ được mở rộngnhà điều hànhLàm toán trong CSS của bạn rất hữu ích. Sass có một số toán tử toán học tiêu chuẩn như 96, 97, 98, 99 và 00. Trong ví dụ của chúng tôi, chúng tôi sẽ thực hiện một số phép toán đơn giản để tính chiều rộng cho 01 và 02SCSS Cú pháp 9Cú pháp Sass 0Đầu ra CSS 1Chúng tôi đã tạo một lưới chất lỏng rất đơn giản, dựa trên 960px. Các thao tác trong Sass cho phép chúng tôi thực hiện một số việc như lấy giá trị pixel và chuyển đổi chúng thành tỷ lệ phần trăm mà không gặp nhiều rắc rối |