Các bảng định kiểu tuyệt vời sử dụng la bàn trong Sass
Trong bài đăng cuối cùng của chúng tôi, chúng tôi đã đề cập một lần về La bàn. Theo trang web chính thức, nó được mô tả là Khung tác giả CSS mã nguồn mở.
Nói tóm lại, Compass là một phần mở rộng Sass và, giống như LESS Element of LESS, nó có một loạt các Mixins CSS3 sẵn sàng sử dụng, ngoại trừ nó cũng đã thêm một số công cụ khác làm cho nó trở thành công cụ đồng hành mạnh mẽ hơn với Sass. Hãy cùng kiểm tra nào.
Cài đặt la bàn
La bàn, giống như Sass, cần phải được cài đặt trong hệ thống của chúng tôi. Nhưng, nếu bạn đang sử dụng một ứng dụng như Scout App hoặc Compass.app, điều này sẽ không cần thiết.
Không có họ, bạn cần phải làm điều đó “thủ công” xuyên qua Nhắc thiết bị đầu cuối / lệnh. Để làm như vậy, gõ dòng lệnh sau;
Trên thiết bị đầu cuối Mac / Linux
đá quý sudo cài la bàn
Trên Windows Command Prompt
la bàn cài đặt đá quý
Nếu cài đặt thành công, bạn sẽ nhận được thông báo như hình dưới đây;
Sau đó, chạy dòng lệnh sau trong thư mục làm việc của bạn để thêm Hồ sơ dự án la bàn.
la bàn init
Đọc thêm: Tài liệu dòng lệnh la bàn
Cấu hình la bàn
Nếu bạn đã chạy lệnh này la bàn init, bây giờ bạn nên có một tập tin có tên cấu hình trong thư mục làm việc của bạn. Tập tin này được sử dụng để cấu hình đầu ra dự án. Ví dụ: chúng ta có thể thay đổi tên thư mục ưa thích của mình.
http_path = "/" css_dir = "css" sass_dir = "scss" hình ảnh_dir = "img" javascripts_dir = "js"
Loại bỏ dòng bình luận được tạo bởi La bàn; chúng tôi đặt thật nếu chúng ta cần các ý kiến được in hoặc sai nếu nó không phải.
line_comments = false
Chúng tôi cũng có thể quyết định đầu ra CSS. Có bốn tùy chọn chúng ta có thể chọn : mở rộng, :gọn nhẹ, : nénvà : lồng nhau. Hiện tại, chúng tôi chỉ cần mở rộng vì chúng tôi vẫn đang trong giai đoạn phát triển.
output_style =: mở rộng
Tôi nghĩ rằng các cấu hình này sẽ đủ cho hầu hết các dự án nói chung, nhưng bạn luôn có thể tham khảo tài liệu này, Tham khảo cấu hình la bàn nếu bạn cần thêm tùy chọn.
Cuối cùng, chúng ta cần phải đồng hồ đeo tay mỗi tập tin trong thư mục với dòng lệnh này;
đồng hồ la bàn
Dòng lệnh này, như trong Sass, sẽ xem mọi thay đổi tệp và tạo hoặc cập nhật các tệp CSS tương ứng. Nhưng hãy nhớ, chạy dòng này sau khi bạn đã hoàn tất cấu hình dự án trong cấu hình, nếu không nó sẽ chỉ bỏ qua những thay đổi trong tập tin.
Hỗn hợp CSS3
Trước khi đi qua CSS3, trong chính của chúng tôi .scss tập tin, chúng ta cần nhập La bàn với dòng sau @import "la bàn";, điều này sẽ nhập tất cả các phần mở rộng trong La bàn. Nhưng, nếu chúng ta chỉ cần CSS3, chúng ta cũng có thể làm điều đó cụ thể hơn với dòng này @import "la bàn / css3".
Đọc thêm: La bàn CSS3.
Bây giờ, hãy bắt đầu tạo ra một cái gì đó với Saas và La bàn. Trong tài liệu HTML, giả sử rằng bạn cũng đã tạo một tài liệu, chúng tôi sẽ đặt đánh dấu đơn giản sau:
Ý tưởng cũng đơn giản; chúng ta sẽ tạo một hộp xoay với các góc tròn và bên dưới là các kiểu lồng Sass của chúng ta cho bộ khởi động;
cơ thể màu nền: # f3f3f3; phần chiều rộng: 500px; lề: 50px tự động 0; div chiều rộng: 250px; chiều cao: 250px; màu nền: #ccc; lề: 0 tự động;
Và, để có được hình chữ nhật của chúng ta các góc tròn, chúng ta có thể bao gồm các Mixins CSS3 như sau;
cơ thể màu nền: # f3f3f3; phần chiều rộng: 500px; lề: 50px tự động 0; div chiều rộng: 250px; chiều cao: 250px; màu nền: #ccc; lề: 0 tự động; @incolee bán kính biên giới;
Điều này bán kính biên giới Mixins sẽ tạo ra tất cả các tiền tố của trình duyệt và theo mặc định, bán kính góc sẽ là 5px. Nhưng, chúng ta cũng có thể chỉ định bán kính cho nhu cầu của mình theo cách này @include Border-radius (10px); .
phần div chiều rộng: 250px; chiều cao: 250px; màu nền: #ccc; lề: 0 tự động; -webkit-Border-radius: 10px; -moz-viền-bán kính: 10px; -ms-Border-radius: 10px; -o-Border-radius: 10px; bán kính đường viền: 10px;
Tiếp theo, như kế hoạch, chúng tôi cũng sẽ xoay hộp. Thật dễ dàng để làm điều đó với La bàn, tất cả những gì chúng ta cần làm chỉ là gọi phương thức biến đổi, như vậy;
cơ thể màu nền: # f3f3f3; phần chiều rộng: 500px; lề: 50px tự động 0; div chiều rộng: 250px; chiều cao: 250px; màu nền: #ccc; lề: 0 tự động; @include Border-radius (10px); @incolee xoay;
Mixins này cũng sẽ tạo ra các tiền tố nhà cung cấp tẻ nhạt và xoay vòng sẽ mất 45 độ theo mặc định. Xem CSS được tạo bên dưới.
phần div chiều rộng: 250px; chiều cao: 250px; màu nền: #ccc; lề: 0 tự động; -webkit-Border-radius: 10px; -moz-viền-bán kính: 10px; -ms-Border-radius: 10px; -o-Border-radius: 10px; bán kính đường viền: 10px; -webkit-Transform: xoay (45deg); -moz-Transform: xoay (45deg); -ms-Transform: xoay (45deg); -o-Transform: xoay (45deg); biến đổi: xoay (45deg);
Trợ giúp la bàn
Một trong những tính năng mạnh mẽ nhất trong La bàn là Người trợ giúp. Theo trang web chính thức, Trình trợ giúp la bàn là các chức năng làm tăng thêm các chức năng do Sass cung cấp. Được rồi, chúng ta hãy xem các ví dụ sau đây để có được một hình ảnh rõ ràng.
Thêm tệp @ phông chữ
Trong ví dụ này, chúng tôi sẽ thêm họ phông chữ tùy chỉnh với @mặt chữ quy tắc. Trong CSS3 đơn giản, mã có thể trông giống như thế này bên dưới, bao gồm bốn loại phông chữ khác nhau và nó cũng khó nhớ đối với một số người.
@ font-face font-family: "MyFont"; định dạng src: url ('/ font / font.ttf') ('truetype'), định dạng url ('/ font / font.otf') ('opentype'), url ('/ font / font.woff') ('woff'), định dạng url ('/ font / font.eot') ('embed-opentype'); Với la bàn chúng ta có thể làm tương tự dễ dàng hơn với tập tin phông chữ () Người giúp đỡ;
@include font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); Đoạn mã trên sẽ tạo ra một kết quả hoàn toàn giống với đoạn mã đầu tiên, nó cũng sẽ tự động phát hiện loại phông chữ và thêm nó vào định dạng() cú pháp.
Tuy nhiên, nếu chúng ta xem kỹ mã, bạn sẽ thấy rằng chúng tôi đã không thêm đường dẫn phông chữ (/ phông chữ /). Vậy, làm thế nào mà La bàn biết vị trí của các phông chữ? Chà, đừng nhầm lẫn, con đường này thực sự bắt nguồn từ cấu hình với Font_path bất động sản;
Font_dir = "phông chữ"
Vì vậy, giả sử chúng ta thay đổi nó thành Font_dir = "myfonts", sau đó mã được tạo sẽ là url ('/ myfonts / font.ttf'). Theo mặc định, khi chúng tôi không chỉ định đường dẫn, La bàn sẽ hướng nó tới bảng định kiểu / phông chữ.
Thêm hình ảnh
Hãy tạo một ví dụ khác, lần này chúng ta sẽ thêm một hình ảnh. Thêm hình ảnh thông qua CSS là một điều phổ biến. Chúng tôi thường làm điều này bằng cách sử dụng hình nền tài sản, như vậy;
div hình nền: url ('/ img / the-image.png'); Trong La bàn, thay vì sử dụng url () chức năng, chúng ta có thể thay thế nó bằng URL hình ảnh() Người trợ giúp và tương tự như thêm @mặt chữ ở trên, chúng ta hoàn toàn có thể bỏ qua đường dẫn và để La bàn xử lý phần còn lại.
Mã này cũng sẽ tạo ra khai báo CSS chính xác như trong đoạn đầu tiên.
div hình nền: hình ảnh-url (the-image.png);
Ngoài ra, La bàn cũng có Trình trợ giúp kích thước hình ảnh, nó chủ yếu phát hiện chiều rộng và chiều cao của hình ảnh, vì vậy trong trường hợp chúng tôi cần cả hai để được chỉ định trong CSS, chúng tôi có thể thêm hai dòng nữa, như sau;
div hình nền: hình ảnh-url ("hình ảnh.png"); chiều rộng: chiều rộng hình ảnh ("hình ảnh.png"); chiều cao: hình ảnh chiều cao ("hình ảnh.png"); Đầu ra sẽ trở thành một cái gì đó như thế này;
div hình nền: url ('/ img / hình ảnh.png? 1344774650'); chiều rộng: 80px; chiều cao: 80px; Đọc thêm: Chức năng trợ giúp la bàn
Suy nghĩ cuối cùng
Được rồi, chúng ta đã thảo luận khá nhiều về La bàn ngày hôm nay và như bạn có thể thấy nó thực sự là một công cụ mạnh mẽ và chúng ta hãy viết CSS theo cách thanh lịch hơn.
Và, như bạn đã biết, Sass không phải là người duy nhất Bộ tiền xử lý CSS; đó cũng là BÀI mà chúng ta đã thảo luận kỹ lưỡng trước đây. Trong bài đăng tiếp theo, chúng tôi sẽ cố gắng so sánh trực tiếp, cái nào trong hai cái này làm tốt hơn trong quá trình tiền xử lý CSS.
- Tải xuống nguồn
