Hướng dẫn đơn giản và dễ hiểu để hiểu Sass
Cách đây một thời gian, Thoriq Firdaus đã viết một bài viết tuyệt vời về việc bắt đầu với Sass, trong đó chỉ cho bạn cách cài đặt và sử dụng ngôn ngữ tiền xử lý CSS rất hữu ích này (bạn có thể muốn kiểm tra nó, bạn biết đấy, để bắt đầu).
Trong bài viết này, tôi nghĩ rằng tôi sẽ cung cấp cho bạn một cái nhìn sâu sắc hơn về những gì bạn có thể làm với Sass và cách các nhà phát triển sử dụng nó mỗi ngày để tạo mã CSS tốt hơn và mô đun hơn. Bỏ qua phần trước bạn muốn:
- Công cụ của thương mại
- Biến
- Làm tổ
- Mở rộng quy tắc
- Hỗn hợp
- Lựa chọn giữ chỗ
- Hoạt động
- Chức năng
Công cụ của thương mại
Thoriq chỉ cho bạn cách bạn có thể sử dụng Sass từ dòng lệnh bằng cách sử dụng sass - đồng hồ chỉ huy.
Nếu bạn thích các công cụ GUI, bạn có thể đi với ứng dụng yêu thích cá nhân của tôi, Codekit, một công cụ phát triển web để biên dịch Sass, nối, tự động trộn và nhiều hơn nữa. Prepros là một ứng dụng rất có khả năng khác có thể được sử dụng trên tất cả các hệ thống. Cả hai đều ứng dụng trả phí nhưng rất đáng giá nếu bạn sử dụng chúng trong thời gian dài.
Nếu bạn chỉ muốn thử Sass mà không phải trả bất cứ điều gì bạn có thể sử dụng thiết bị đầu cuối hoặc Koala (đây là đánh giá của chúng tôi), một ứng dụng giàu tính năng đa nền tảng miễn phí, có thể chống lại các đối tác cao cấp.
Biến
Một trong những điều đầu tiên bạn sẽ cần phải quấn đầu là các biến. Nếu bạn đến từ PHP hoặc nền tảng ngôn ngữ mã hóa tương tự khác, đây sẽ là bản chất thứ hai đối với bạn. Các biến là cho lưu trữ bit và mẩu thông tin có thể tái sử dụng, như một giá trị màu chẳng hạn:
$ chính_color: # 666666; .button màu: $ chính_color; .important color: $ primary_color;
Điều này có vẻ không hữu ích ở đây, nhưng hãy tưởng tượng có 3.000 dòng mã. Nếu bảng màu của bạn thay đổi, bạn sẽ cần thay thế từng giá trị màu trong CSS. Với Sass, bạn có thể sửa đổi giá trị của $ chính_color biến và được thực hiện với nó.
Các biến được sử dụng cho lưu trữ tên phông chữ, kích cỡ, màu sắc và một loạt các thông tin khác. Đối với các dự án lớn hơn, chúng tôi có thể trích xuất tất cả các biến của bạn thành một tệp riêng biệt (chúng tôi sẽ xem xét cách thực hiện sớm). Điều này cho phép bạn làm là đổi màu toàn bộ dự án của bạn và thay đổi phông chữ và các khía cạnh quan trọng khác mà không bao giờ chạm vào các quy tắc CSS thực tế. Tất cả bạn cần làm là sửa đổi một số biến.
Làm tổ
Một tính năng cơ bản khác mà Sass cung cấp cho bạn là khả năng làm tổ. Giả sử rằng bạn đang xây dựng một menu điều hướng. Bạn có một hải quân phần tử có chứa một danh sách không có thứ tự, danh sách các mục và liên kết. Trong CSS, bạn có thể làm một cái gì đó như thế này:
#header nav / * Quy tắc cho khu vực điều hướng * / #header nav ul / * Quy tắc cho menu * / #header nav li / * Quy tắc cho các mục danh sách * / #header nav a / * Quy tắc cho các liên kết * /
Trong các công cụ chọn, chúng tôi đang lặp lại rất nhiều. Nếu các phần tử có gốc chung, chúng ta có thể sử dụng lồng viết các quy tắc của chúng tôi một cách sạch sẽ hơn nhiều.
Đây là cách mã trên có thể nhìn trong Sass:
#header nav / * Quy tắc cho khu vực điều hướng * / ul / * Quy tắc cho menu * / li / * Quy tắc cho các mục danh sách * / a / * Quy tắc cho liên kết * /
Làm tổ là vô cùng hữu ích vì nó làm cho các bảng định kiểu (rất nhiều) dễ đọc hơn. Bằng cách sử dụng lồng nhau cùng với thụt lề thích hợp, bạn có thể đạt được cấu trúc mã dễ đọc, ngay cả khi bạn có một số lượng mã.
Một nhược điểm của việc làm tổ là nó có thể dẫn đến tính đặc hiệu không cần thiết. Trong ví dụ trên tôi đã tham khảo các liên kết với #header điều hướng a. Bạn cũng có thể sử dụng #header điều hướng mà có lẽ là quá nhiều.
Trong Sass, việc cụ thể hóa rất dễ dàng hơn nhiều vì tất cả những gì bạn cần làm là lồng các quy tắc của bạn. Sau đây là rất ít đọc và khá cụ thể.
#header nav / * Quy tắc cho khu vực điều hướng * / ul / * Quy tắc cho menu * / li / * Quy tắc cho các mục danh sách * / a / * Quy tắc cho liên kết * /
Mở rộng quy tắc
Mở rộng sẽ quen thuộc nếu bạn làm việc với các ngôn ngữ hướng đối tượng. Điều này được hiểu rõ nhất qua một ví dụ, hãy tạo 3 nút là các biến thể nhỏ của nhau.
.nút display: inline-block; màu: # 000; nền: # 333; bán kính đường viền: 4px; phần đệm: 8px 11px; .button-sơ cấp @extend .button; nền: # 0091C2 .button-small @extend .button; cỡ chữ: 0,9em; phần đệm: 3px 8px;
Các .nút chính và .nút nhỏ tất cả các lớp mở rộng .nút lớp có nghĩa là họ đảm nhận tất cả các thuộc tính của nó và sau đó định nghĩa riêng của chúng.
Điều này vô cùng hữu ích trong nhiều tình huống có thể sử dụng các biến thể của một yếu tố. Tin nhắn (cảnh báo / thành công / lỗi), nút (màu sắc, kích thước), loại menu, v.v ... đều có thể sử dụng chức năng mở rộng để đạt hiệu quả CSS tuyệt vời.
Một cảnh báo mở rộng là họ sẽ không làm việc trong các truy vấn truyền thông Như bạn đã mong đợi. Đây là một nâng cao hơn một chút nhưng bạn có thể đọc tất cả về hành vi này trong Tìm hiểu về Bộ chọn giữ chỗ - Bộ chọn giữ chỗ là loại tiện ích mở rộng đặc biệt mà chúng tôi sẽ sớm nói đến.
Hỗn hợp
Mixins là một tính năng yêu thích khác của người dùng tiền xử lý. Mixins là các quy tắc có thể tái sử dụng - hoàn hảo cho các quy tắc dành riêng cho nhà cung cấp hoặc để viết tắt các quy tắc CSS dài.
Cách tạo quy tắc chuyển đổi cho các phần tử di chuột:
@mashing hiệu ứng di chuột -webkit-quá trình: màu nền 200ms; -moz-quá trình: màu nền 200ms; -o-trans: màu nền 200ms; chuyển tiếp: màu nền 200ms; một @incoide hiệu ứng di chuột; .button @include hiệu ứng di chuột;
Mixins cũng cho phép bạn sử dụng các biến để xác định các giá trị trong mixin. Chúng ta có thể viết lại ví dụ trên để cung cấp cho chúng tôi quyền kiểm soát thời gian chính xác của quá trình chuyển đổi. Ví dụ, chúng tôi có thể muốn các nút chuyển đổi chậm hơn một chút.
@mixin hiệu ứng di chuột ($ speed) -webkit-quá trình chuyển đổi: màu nền $ speed; -moz-quá trình: màu nền $ tốc độ; -o-trans: màu nền $ speed; chuyển tiếp: màu nền $ tốc độ; một @include hiệu ứng di chuột (200ms); .button @include hiệu ứng di chuột (300ms);
Lựa chọn giữ chỗ
Các bộ chọn giữ chỗ đã được giới thiệu với Sass 3.2 và đã giải quyết một vấn đề có thể gây ra một chút phình to trong mã CSS được tạo của bạn. Hãy xem mã này tạo ra các thông báo lỗi:
.tin nhắn cỡ chữ: 1.1em; phần đệm: 11px; đường viền rộng: 1px; kiểu viền: chắc chắn; .message-risk @extend .message; nền: # C20030; màu: #fff; viền màu: # A8002A; .message-thành công @extend .message; nền: # 7EA800; màu: #fff; đường viền màu: # 6B8F00;
Rất có thể lớp thông báo sẽ không bao giờ được sử dụng trong HTML của chúng tôi: nó đã được được tạo ra để được mở rộng, không được sử dụng như là. Điều này gây ra một chút phình to trong CSS được tạo của bạn. Để làm cho mã của bạn hiệu quả hơn, bạn có thể sử dụng bộ chọn giữ chỗ được chỉ định bằng dấu phần trăm:
% tin nhắn cỡ chữ: 1.1em; phần đệm: 11px; đường viền rộng: 1px; kiểu viền: chắc chắn; .message-risk @extend% nút; nền: # C20030; màu: #fff; viền màu: # A8002A; .message-thành công nút @extend%; nền: # 7EA800; màu: #fff; viền màu: # 6D9700;
Ở giai đoạn này, bạn có thể tự hỏi sự khác biệt giữa extends và mixins là gì. Nếu bạn sử dụng trình giữ chỗ, chúng sẽ hoạt động như một mixin không có tham số. Điều này là đúng, nhưng đầu ra trong CSS khác nhau. Sự khác biệt là quy tắc trùng lặp trong khi giữ chỗ sẽ đảm bảo rằng các quy tắc tương tự chia sẻ bộ chọn, dẫn đến ít CSS cuối cùng.
Hoạt động
Thật khó để cưỡng lại sự chơi chữ ở đây, nhưng bây giờ tôi sẽ kiềm chế mọi trò đùa y tế. Các toán tử cho phép bạn thực hiện một số phép toán trong mã CSS của bạn và có thể khá hữu ích. Ví dụ trong hướng dẫn Sass là hoàn hảo để hiển thị điều này:
.container chiều rộng: 100%; bài viết float: left; chiều rộng: 600px / 960px * 100%; sang một bên float: right; chiều rộng: 300px / 960px * 100%;
Ví dụ trên tạo ra một hệ thống lưới dựa trên 960px với rắc rối tối thiểu. Nó sẽ biên dịch độc đáo sang CSS sau:
.container chiều rộng: 100%; bài viết float: left; chiều rộng: 62,5%; sang một bên float: right; chiều rộng: 31,25%;
Một công dụng tuyệt vời tôi tìm thấy cho các hoạt động là thực sự pha trộn màu sắc. Nếu bạn nhìn vào thông báo thành công Sass ở trên thì không rõ màu sắc của nền và đường viền có mối quan hệ nào đó. Bằng cách trừ đi một màu xám, chúng ta có thể làm tối màu, làm cho mối quan hệ hiển thị:
$ chính: # 7EA800; .message-thành công @extend% nút; nền: $ chính; màu: #fff; viền màu: $ sơ cấp - # 111;
Màu bị trừ càng nhạt, màu kết quả sẽ càng đậm. Màu càng nhạt, màu càng nhạt.
Chức năng
Có một số lượng lớn các hàm để sử dụng: Hàm số, hàm chuỗi, hàm danh sách, hàm màu và nhiều hơn nữa. Hãy xem danh sách dài trong tài liệu dành cho nhà phát triển. Tôi sẽ xem xét một cặp vợ chồng ở đây chỉ để cho bạn thấy họ làm việc như thế nào.
Các làm sáng và làm tối chức năng có thể được sử dụng để thay đổi độ sáng của màu. Điều này tốt hơn là trừ đi các sắc thái, nó làm cho mọi thứ thậm chí còn nhiều mô-đun và rõ ràng hơn. Hãy xem ví dụ trước của chúng tôi bằng cách sử dụng chức năng làm tối.
$ chính: # 7EA800; .message-thành công @extend% nút; nền: $ chính; màu: #fff; viền màu: đậm ($ sơ cấp, 5);
Đối số thứ hai của hàm là tỷ lệ phần trăm tối được yêu cầu. Tất cả các chức năng có tham số; hãy xem tài liệu để xem chúng là gì! Dưới đây là một vài chức năng màu tự giải thích khác: khử bão hòa, bão hòa, đảo ngược, thang độ xám.
Các trần nhà Hàm, giống như trong PHP, trả về một số được làm tròn thành toàn bộ số tiếp theo. Điều này có thể được sử dụng khi tính toán độ rộng cột hoặc nếu bạn không muốn sử dụng nhiều vị trí thập phân trong CSS cuối cùng.
.tiêu đề font-size: ceil ($ title_size * 1.3314);
Tổng quan
Các tính năng trong Sass cung cấp cho chúng tôi sức mạnh tuyệt vời để viết CSS tốt hơn với ít nỗ lực hơn. Việc sử dụng đúng mixin, mở rộng, chức năng và biến sẽ giúp biểu định kiểu của chúng tôi dễ bảo trì hơn, dễ đọc hơn và dễ viết hơn.
Nếu bạn quan tâm đến một bộ tiền xử lý CSS tương tự khác, tôi khuyên bạn nên xem LESS (hoặc xem hướng dẫn cho người mới bắt đầu của chúng tôi) - hiệu trưởng cơ bản rất giống nhau!
