Hướng dẫn Sass Xây dựng một vCard trực tuyến với Sass & La bàn

 
 
  
 
 
Thoriq Firdaus
 
[email protected]
 
(+62) 1.2345.678.9
 
Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Suspendisse dolor neque, eleifend tại pellentesque quis, confallis ngồi amet Tellus. Etiam et auctor arcu.
 
 
 
 
 
 
Facebook
 
 Twitter
 
Google+
 
Rê bóng
 
 
 
 

Như bạn có thể thấy ở trên, các bản sắc xã hội được bao gồm trong 'xã hội'phần được cấu trúc trong các thành phần danh sách để chúng ta có thể dễ dàng hiển thị chúng cạnh nhau. Mỗi người trong số họ được đặt một tên lớp theo quy ước này mạng xã hội, mạng xã hội, mạng xã hội và v.v..

Cấu hình la bàn

Chúng ta cần cấu hình La bàn một chút bằng cách bỏ qua một vài dòng trong cấu hình tập tin như sau:

 # Bạn có thể chọn kiểu đầu ra ưa thích của mình tại đây (có thể được ghi đè qua dòng lệnh): output_style =: Extended # Để bật đường dẫn tương đối đến tài sản thông qua các chức năng của trình trợ giúp la bàn. Uncomment: Rel_assets = true # Để tắt nhận xét gỡ lỗi hiển thị vị trí ban đầu của bộ chọn của bạn. Uncomment: line_comments = false 

Nếu bạn không thể tìm thấy cấu hình tập tin, bạn có thể không chạy lệnh này la bàn init trong thư mục dự án của bạn.

Nhập tệp

Vì chúng tôi sẽ sử dụng La bàn, chúng tôi cần nhập nó bằng cách sử dụng;

 @import "la bàn"; 

Và đó là sở thích cá nhân của tôi để đặt lại các kiểu mặc định từ các trình duyệt để đầu ra sẽ được hiển thị ổn định hơn. La bàn, trong trường hợp này, có mô-đun Reset. Mô-đun này dựa trên thiết lập lại CSS của Eric Meyer và có thể được nhập bằng cách sử dụng;

 @import "la bàn / thiết lập lại"; 

Tuy nhiên, tôi thích sử dụng Bình thường hóa hơn cũng có định dạng Sass / Scss. Tải tập tin ở đây, lưu nó vào sass thư mục làm việc và nhập nó vào biểu định kiểu của chúng tôi.

 @import "bình thường hóa"; 

Đề nghị đọc: Xem lại mức độ ưu tiên của kiểu CSS

Biến

Chúng tôi chắc chắn sẽ có một vài giá trị không đổi trong biểu định kiểu, do đó chúng tôi sẽ lưu trữ chúng trong các biến và hai biến dưới đây sẽ xác định màu cơ sở của vCard của chúng tôi.

 $ cơ sở: #fff; $ dark: tối ($ cơ sở, 10%); 

Trong khi $ chiều rộng biến dưới đây sẽ là chiều rộng của trang của chúng tôi; nó cũng sẽ là cơ sở để xác định các kích thước phần tử khác.

 $ chiều rộng: 500px; $ không gian: $ chiều rộng / 25; // = 20px 

Và $ không gian như bạn có thể thấy, biến sẽ là khoảng cách hoặc kích thước cột mặc định trong vCard của chúng tôi, trong ví dụ này sẽ là 20px;

La bàn cũng có Người trợ giúp để phát hiện kích thước hình ảnh và chúng tôi sẽ sử dụng tính năng này trên hồ sơ hình ảnh của chúng tôi, như sau;

 $ img: chiều rộng hình ảnh ("me.jpg") + (($ space / 4) * 2); 

Thêm Thêm vào của (($ không gian / 4) * 2) trong đoạn mã trên, là để tính tổng chiều rộng hình ảnh bao gồm cả đường viền sẽ đóng khung hình ảnh. Một khung thường có hai mặt; trên và dưới / trái và phải, đó là lý do tại sao chúng tôi nhân kết quả phân chia bởi 2.

Kế thừa chọn

Rõ ràng có một vài bộ chọn trong biểu định kiểu của chúng tôi sẽ có cùng quy tắc tạo kiểu. Để tránh sự lặp lại trong mã của chúng tôi, chúng tôi sẽ cần chỉ định các kiểu này ở vị trí đầu tiên và kế thừa chúng với @mở rộng chỉ thị bất cứ khi nào cần thiết. Phương pháp này, trong Sass, được gọi là Kế thừa chọn, một tính năng rất hữu ích bị thiếu trong LESS.

 .float-left float: left;  .izing-size @include box-sizing (Border-box);  

Kiểu dáng

Khi tất cả những gì cần thiết đã được thiết lập, đó là lúc tạo kiểu vCard của chúng tôi, bắt đầu bằng màu nền cho tài liệu HTML của chúng tôi;

 html chiều cao: 100%; màu nền: $ cơ sở;  

thẻ vCard

Các kiểu sau định nghĩa trình bao bọc vCard. Nếu bạn đã làm việc với LESS trước đây, mã này sẽ quen thuộc với bạn và dễ tiêu hóa.

 .vcard chiều rộng: $ chiều rộng; lề: tự động 50px; màu nền: đậm ($ cơ sở, 5%); viền: 1px solid $ dark; @include Border-radius (3px); ul đệm: 0; lề: 0; li list-style: none;  

Chiều rộng của trình bao bọc kế thừa giá trị từ $ chiều rộng biến. Màu nền đậm hơn bởi 5% từ màu cơ bản, trong khi màu viền sẽ đậm hơn bởi 10%. Màu này đạt được bằng cách sử dụng các chức năng màu Sass.

Thẻ vCard cũng sẽ có 3px bán kính của các góc tròn đạt được bằng Mixins CSS3; bán kính đường viền (3px).

Phần sinh học

Như chúng tôi đã lưu ý sớm trong hướng dẫn này, vCard có thể được chia thành hai phần. Những kiểu lồng nhau dưới đây sẽ xác định phần đầu tiên chứa hồ sơ hình ảnh với một vài chi tiết (tên, email và điện thoại).

 .bio Border-bottom: 1px solid $ dark; đệm: $ không gian; @extend .box-size; img @extend .float-trái; hiển thị: khối; viền: ($ space / 4) solid #ffffff;  .detail @extend .float-left; @extend .box-size; màu: đậm ($ cơ sở, 50%); lề: left: $ dấu cách; dưới cùng: $ không gian / 2;  width: $ width - (($ space * 3) + $ img); li &: trước width: $ space; chiều cao: $ không gian; lề phải: $ dấu cách; họ phông chữ: "ModernPictogramsN normal";  & .name: trước nội dung: "f";  & .email: trước nội dung: "m";  & .phone: trước nội dung: "N";  

Có một điều từ đoạn mã trên mà chúng tôi nghĩ rằng bạn cần phải thông báo. Chiều rộng trong .chi tiết bộ chọn được chỉ định với phương trình này $ width - (($ space * 3) + $ img);.

Phương trình này được sử dụng để tính toán động các chi tiết chiều rộng bằng cách trừ chiều rộng hồ sơ hình ảnh và khoảng trắng (phần đệm và lề) khỏi tổng chiều rộng của vCard.

Bộ phận xã hội

Các kiểu bên dưới dành cho phần thứ hai trong vCard. Thực sự không có sự khác biệt với CSS đơn giản ở đây, chỉ bây giờ chúng được lồng và một vài giá trị được xác định bằng các biến.

 .xã hội màu nền: $ tối; chiều rộng: 100%; đệm: $ không gian; @extend .box-size; ul text-align: centre; li hiển thị: khối nội tuyến; chiều rộng: 32px; chiều cao: 32px; một văn bản trang trí: không có; hiển thị: khối nội tuyến; chiều rộng: 100%; chiều cao: 100%; văn bản thụt lề: 100%; khoảng trắng: nowrap; tràn: ẩn;  

Trong phần này, chúng tôi sẽ hiển thị các biểu tượng phương tiện truyền thông xã hội bằng cách sử dụng kỹ thuật sprite hình ảnh và La bàn có một tính năng để thực hiện công việc đó nhanh hơn.

Trước hết, chúng ta cần đặt các biểu tượng của mình vào một thư mục đặc biệt - hãy đặt tên cho thư mục /xã hội/, ví dụ. Quay lại biểu định kiểu, nối các biểu tượng đó với các biểu tượng sau @ nhập khẩu quy tắc.

 @import "xã hội / *. png"; 

Các xã hội/ ở trên tham khảo thư mục nơi chúng tôi lưu trữ các biểu tượng. Thư mục này nên được lồng trong thư mục hình ảnh. Bây giờ, nếu chúng ta xem trong thư mục hình ảnh của mình, chúng ta sẽ thấy một hình ảnh sprite được tạo với các ký tự ngẫu nhiên, như xã hội-sc805f18607.png. Tại thời điểm này, không có gì vẫn không xảy ra ở phần đầu, cho đến khi chúng tôi áp dụng các kiểu với dòng sau.

 @ bao gồm tất cả các xã hội-spites; 

Kết quả cuối cùng

Cuối cùng, sau tất cả những công việc khó khăn, giờ đây chúng ta có thể thấy kết quả như thế này:

Trong trường hợp chúng tôi nghĩ rằng 500px sau này quá rộng, chúng ta chỉ cần thay đổi giá trị trong $ chiều rộng biến - ví dụ, 350px - phần còn lại sẽ “điêu kỳ diệu” được điều chỉnh. Bạn cũng có thể thử nghiệm với biến màu.

• Xem bản demo
• Tải xuống nguồn

Phần kết luận

Trong hướng dẫn này, chúng tôi đã chỉ cho bạn cách xây dựng một vCard trực tuyến đơn giản với Sass và La bàn; đây chỉ là một ví dụ Sass và La bàn thực sự rất mạnh, nhưng đôi khi không cần thiết. Chẳng hạn, khi chúng tôi đang làm việc trên một trang web có một vài trang và có lẽ cũng sẽ chỉ cần ít dòng kiểu hơn, sử dụng Sass và La bàn được coi là quá mức.

Bài đăng này đóng loạt Sass của chúng tôi và chúng tôi hy vọng bạn thích nó. Nếu bạn có bất kỳ câu hỏi nào liên quan đến chủ đề này, đừng ngần ngại thêm nó vào hộp bình luận bên dưới.