Blog

Hướng dẫn sử dụng Susy : Superpowered Saa Grid

Home / Blog / Hướng dẫn sử dụng Susy : Superpowered Saa Grid

1 year ago Comment!

Susy là tập hợp mạnh mẽ của Sass mixins để xây dựng bố cục dựa trên grid-based layouts.

huong-dan-su-dung-susy1

Susy có gì tuyệt vời đến vậy? Chúng tôi sẽ chỉ cho bạn những điều cơ bản khi làm việc với susy trong hướng dẫn này, sau đây là danh sách để tham khảo:

  • Anti-framework: Susy không áp đặt bất kỳ triết lý grid cụ thể. Như vậy, bạn sẽ không được thả trong một file CSS và sự dụng các lớp ra khỏi hộp ( làm với một Framework như Bootstrap). Thay vào đó, bạn sẽ được quy định các grid riêng của bạn, cho phép Susy thực hiện các tinh toán cho bạn.
  • Mixin-oriented, no-bloat: Susy không phải là một khuôn khổ. Nó ko phải là 1 framework , nó ko tốn bất cứ KB nào cả. vì nó ko phải là Css bạn ko thể miêu tả bình thường được.
  • Powerful configuration, sensible defaults: Susy sử dụng các quy tắc cấu hình trong quá trình xây dựng của nó, nhưng chưa yêu cầu bna5 phải tìm hiểu tất cả mọi để để bắt đầu

Ba ưu điểm đơn giản trên là quá đủ để nói về Susy, hãy bắt đầu !

Cài đặt

Đầu tiên, bạn sẽ cần phải làm quen với Sas. s để viết và biên dịch nó. Tại thời điểm bài viết này, Susy thực hiện một số tính năng Sass mà chưa được hỗ trợ bởi LibSass ( trình biên dịch Sass C-Based), do đó bạn sẽ càn sử dụng các phiên bản Ruby của Sass. Bắt đầu cài Sass và học cách sự dụng các watch câu lệnh, đó sẽ là điều càn thiết để làm việc với Sass nói chung cũng như tốt với Susy.

Tiếp theo, bạn sẽ cài đặt Susy trên máy tính vì Susy bị phụ thuộc vào Sass, có thẻ tải file.zip từ Github và sap chép nội dụng của thư mục Sass vào dự án của bạn.

huong-dan-su-dung-susy2

Tiếp theo, bạn sẽ cần phải nhập Susy vào tập tin Sass :

huong-dan-su-dung-susy3

Điều này giả định bạn đang ở một thư mục với các nội dung của thư mục Sass.

Hello Colums : ví dụ đầu tiên

Susy cơ bản là một tập hợp các mixins cũng giống như các chức năng trong Sass. Những mixins được gọi là mã bên trong Sass và khi trình biên định Sass chạy, nó sẽ nhìn vào các định nghĩa mixin trong các tập tin Susy và xác định đầu ra.

Các mixin quan trọng nhất trong Susy là  span mixin, kiểu như thế này:

huong-dan-su-dung-susy4

Các span  mixin cũng dựa trên container mixin, trong đó những thiết lập với Susy gọi là “ layout context “ .

huong-dan-su-dung-susy5

Susy cho phép tạo ra các khoảng dựa trên một thông số định sẵn các cột trong một gridset

huong-dan-su-dung-susy6

Sức mạnh của Susy vượt qua cả grid trung bình, cho phép ít hơn các cấu hình grids tho6g thường, ví dụ đơn giản, một bố trí 9 cột ( a 9 column layout)

huong-dan-su-dung-susy7

Sass map

Susy cho phép bạn thiết lập cấu hình thông qua biến. Tạo ra một biểu đồ Sass cho phép bạn xác định một số tùy chọn về cách thức Susy đặt ra các khoảng. Susy thực hiện một số  layout mixin kết quả ra một biểu đồ cấu hình. Dưới đây là các thiết lập mặc định, trực tiếp lấy từ tài liệu của Susy:

huong-dan-su-dung-susy8

Bạn có thể ghi đè lên bất kỳ thiết lập cụ thể nào bằng cách thểm vào biểu đồ riêng : $susy

huong-dan-su-dung-susy9

Lựa chọn thườn thay đổi số lượng cột, chiều rộng và cácoutput  tùy chọn. Mỗi tùy chọn cấu hình có cái gì đó khác nhau.

VÍ dụ thực tế

Span and container Mixins

Ở đây, chúng ta có thể thấy một sử dụng cơ bản của  “span and container Mixins”

huong-dan-su-dung-susy10

Có một số điều chú ý tới ví dụ này : chúng ta đã tao ra một ví dụ liên tưởng của một bảng điều khiển. Chúng tôi đã bao gồm một số nhỏ của JavaScript mà lấy về hình ảnh của người sử dụng các uifaces.com API.

Những mảnh Susy cụ thể là các cột. Ví dụ này, chúng tôi đã tạo ra một bố trí đáp ứng được các cú pháp @include span()  . Chúng tôi cũng đã sử dụng khả năng lồng với nhau của SCSS trong một vài điểm. Lưu ý rằng Susy phù hợp với các cú pháp truy vấn phương tiện thông tin bình thường. Chúng tạo ra một container ra khỏi .stats  phần sử dụng @include container;

Cũng cần lưu ý rằng có những cột lồng nhau trong ví dụ này; các yếu tố  .avatar được lồng bên trong một cột Susy và điều này hoàn toàn tốt vì Susy sử dụng độ rộng phiên dịch theo mặc định

Layout Shorthand

Tiếp theo, chúng ta có thể nhìn thấy một cách sử dụng cách viết tắt của Susy trong việc bố trí với grid đó có các cột lớn ở giữa hơn so với bên ngoài.

huong-dan-su-dung-susy16

Trong ví dụ này, chúng tôi đang sử dụng một vài lựa chọn khác nhau trông mới hơn. Đầu tiên, chúng tôi tạo các dấu bằng Haml. Haml là 1 sự thay thế đánh dấu khoảng trắng HTML được xây dựng trên dấu trang của Ruby. Như là một kiểu bộ tiền xử lý trong HTML

Hãy nhìn ví dụ mà chúng tôi đã tạo ra:

huong-dan-su-dung-susy18

Tạo ra 1 một <div> phần tử bằng cách mặc định và cung cấp cho nó một lớp brick-list

huong-dan-su-dung-susy19

Dòng thụt vào này cứ lập đi lặp lại bất cứ điều gì được lồng vào bên trong xắp đặt 30 lần. Có nghĩa bất kỳ bất cứ điều gì cũng được xuất ra sẽ được bên trong của div chúng tôi tạo ra ở trên với .brick-list. Còn |i| đi qua các chỉ số hiện tại, đó là tính của các vòng lập, bắt đầu tự o. VÌ vậy, đơn cử vào thời điểm thứ năm thông qua các vòng lặp, thì vẫn sẽ là bằng 4.

huong-dan-su-dung-susy20

Chúng tôi nhìn thấy của 30.times vòng lập. Các .col tạo ta một div với các class của col. Việc %img{…} tạo ra một phần tử <img>, và các thuộc tính trong dấu ngoặc nhọn được truyền vào hình ảnh đó. Chúng tôi đang sử dụng hhhhold.com. Cú pháp ở đây là cú pháp băm Ruby trong nhiều cách rất giống với JSON

Một phần quan trọng của những dòng này là #{}, trong đó cho phép bạn in ra các biến I chỉ số. Chúng tôi sử dụng biến này trong các URL như một tham số để hình ảnh chúng ta nạp là không giống nhau.

Grid Susy là duy nhất trong ví dụ này, chúng tôi thiết lập một grid với biến dòng :

huong-dan-su-dung-susy21

Biến này sẽ được thông qua với Susy trong span minix và tạo ra một grid với sáu cột, cột đầu tiên có độ rộng là 1, cột thứ hai của chiều rộng là 2, cột thứ 3 có chiều rộng là 5 .v..v..

Chúng tôi sử dụng grid này trong suốt ví dụ, đặt .col divs tại các ngày 1,3, và các cột bắt đầu từ thứ 5 và kéo dài 2 cột bằng cách sự dụng quy tắc CSS nth-child. Nếu chúng ta sửa đổi grid giống nhau này thì mỗi cột có cùng chiều rộng, nó  sẽ như thế này.

huong-dan-su-dung-susy22

Dưới đây là những ví dụ tương tự với một bố trí đối xứng nhau

huong-dan-su-dung-susy23

Như bạn có thể thấy, grid không thông thường phải thẳng về phía trước để thực hiện và Susy làm cho gird control mạnh mẽ là một điều dễ dàng.

Kết luận

Susy cung cấp một cách linh hoạt và ít tạo bố  trí các grid của riêng bạn mà không bắt buộc phải áp dụng các quy định sẵn của CSS. Nhờ có sự linh động đó mà Susy có thể nhanh chóng tìm được cách đưa vào dự án mà không cần phải cam kết đầy đủ để sự dụng nó trong CSS duy nhất mà bạn tạo ra.

 

Categorised in:

Leave a Reply

Your email address will not be published.

*

*

Đang tải…