Cách bắt đầu với Sass

Sass. là một công cụ mạnh mẽ mang lại nhiều tính năng từ các ngôn ngữ lập trình khác vào CSS - chẳng hạn như các chức năng, biến và vòng lặp - cũng như mang lại các tính năng trực quan của riêng mình như mixins, lồng và một phần để đặt tên cho một số ít.

Trong hướng dẫn này, chúng tôi sẽ tạo các biểu tượng xã hội bằng cách sử dụng các vòng lặp sass, mixins và hàm. Chúng tôi cũng sẽ sử dụng làm tổ mạnh mẽ có sẵn trong Sass.

• Sass là gì?

Chúng tôi sẽ tạo một danh sách trong Sass để tạo các biểu tượng xã hội của chúng tôi, sẽ bao gồm tên lớp, tham chiếu phông chữ và màu sắc trước - và sau đó là ToolTip.

Và chúng tôi sẽ sử dụng mixins để tạo các truy vấn phương tiện tái sử dụng và tạo một hàm để biến giá trị pixel thành giá trị EM. Để làm điều này, chúng tôi cũng sẽ tạo một biến cho kích thước phông chữ cơ sở của chúng tôi.

Có một số cách để cài đặt và sử dụng Sass tùy thuộc vào hệ thống của bạn và nhu cầu công cụ xây dựng của bạn - có thể tìm thấy nhiều chi tiết hơn đây - Tuy nhiên, chúng tôi sẽ sử dụng Codepen để biên dịch Sass của chúng tôi thành CSS để giữ mọi thứ đơn giản nhất có thể.

Để thực sự khai thác sức mạnh của Sass và không nhận được bản thân về sự cụ thể và độ phức tạp, một sự hiểu biết vững chắc về CSS là bắt buộc. Hương vị đặc biệt của Sass Chúng tôi sẽ sử dụng là SCSS (Sassy CSS), có nghĩa là chúng tôi vẫn đang sử dụng dấu ngoặc nhọn {} trong mã Sass của chúng tôi.

Nhận các tập tin hướng dẫn

Để tải xuống các tệp ví dụ cho hướng dẫn này, hãy truy cập Filesilo. , Chọn nội dung miễn phí và nội dung miễn phí bên cạnh hướng dẫn. LƯU Ý: Lần đầu tiên người dùng sẽ phải đăng ký để sử dụng filesilo.

01. Thiết lập Codep CSS của bạn

Điều đầu tiên chúng ta sẽ cần làm là Tạo một cây bút mới và thay đổi một số cài đặt mặc định cho trình soạn thảo CSS trong Codepen. Chúng tôi sẽ thay đổi bộ tiền xử lý CSS sang SCSS và bật chuẩn hóa và autoprefixer.

02. Bắt đầu viết một số mã

Bây giờ chúng tôi đã thiết lập mọi thứ, chúng tôi có thể bắt đầu viết một số mã. Bên trong trình soạn thảo HTML, chúng tôi sẽ tạo một thùng chứa và một số mục bên trong chứa liên kết và biểu tượng cho mỗi biểu tượng của chúng tôi.

Các tên được sử dụng ở đây sẽ được sử dụng trong danh sách Sass của chúng tôi dưới dạng tham chiếu trong CSS. Chúng tôi cũng sẽ sử dụng quy ước đặt tên BEM cho tên lớp của chúng tôi.

 & lt; div class = "xã hội__container" & gt;
  & lt; div class = "Social__Item" & gt;
  & lt; một mục tiêu = "_ trống" href = "..."
  Lớp = "Social__icon - Twitter" & GT;
  & lt; i class = "biểu tượng - twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Đặt kiểu cơ bản

Chuyển sang trình soạn thảo CSS, chúng tôi sẽ bắt đầu bằng cách bao gồm Font-Awesome, đặt một biến cho kích thước phông chữ cơ sở của chúng tôi và một số kiểu cơ bản cho trang.

 @Import URL (http://srt.lt/w8yt8);
// Biến
$ Base-Font-size: 16px;
// Kiểu dáng cơ bản
thân hình {
  Kích thước phông chữ: $ Phông chữ-Kích thước;
  ...
} 

04. Tạo một chức năng cơ bản

Tiếp theo chúng ta sẽ tạo một hàm cơ bản để biến giá trị pixel thành giá trị EM bằng cách sử dụng biến '$ font-size' của chúng tôi.

Các chức năng trong Sass được tạo bằng cách sử dụng '@fination' theo sau là tên của hàm và đầu vào được sử dụng để thực hiện chức năng.

Sau đó, bên trong khai báo, chúng ta sử dụng '@return' để xuất giá trị khi sử dụng chức năng. '# {}' Xung quanh tính toán được sử dụng cho Nội suy .

 // Chức năng
@fertation px-to-em ($ pixel) {
@return # {$ pixel / $ font-font-size} EM;
} 

05. Làm mixins.

Tiếp tục với thiết lập của chúng tôi, chúng tôi sẽ tạo mixins cho các truy vấn phương tiện di động đơn giản bằng cách sử dụng chức năng 'px-to-EM' của chúng tôi, chúng tôi sẽ vượt qua giá trị PX để trả về giá trị EM.

Mixin được tạo bằng cách sử dụng '@mixin' theo sau là tên cho mixin. Sau đó, bên trong Tuyên bố, chúng ta sử dụng '@content' để xuất mã mà chúng ta đặt bên trong mixin khi gọi nó sau trong Codebase của chúng tôi.

 @Mixin Viewport - Lớn {
  @Media chỉ màn hình và
  (Chiều rộng tối thiểu: PX-to-EM (1680px)) {
  @Nội dung;
}}
@Mixin Viewport - Trung bình {
  @Media chỉ màn hình và
  (Chiều rộng tối thiểu: PX-to-EM (1080px)) {
  @Nội dung;
}} 

06. Thiết lập danh sách Sass

Bước cuối cùng trong thiết lập của chúng tôi là tạo một danh sách. Danh sách trong Sass được tạo bằng một biến; Sau đó cú pháp chính xác khá lỏng lẻo, chấp nhận nhiều loại cách định nghĩa nó .

Bên trong biến chúng ta sẽ xác định tên lớp, giá trị unicode và màu sắc cho mỗi biểu tượng, tách chúng bằng dấu phẩy, bên trong dấu ngoặc đơn.

 $ Danh sách biểu tượng: (
  Vimeo "\ F27D" # 1ab7ea,
  twitter "\ f099" # 1da1f2,
  ...
  github "\ f113" # 333,
  rss "\ f09e" # F26522
); 

07. Hiển thị biểu tượng của bạn liên tiếp

Để các biểu tượng xã hội của chúng tôi hiển thị liên tục, chúng tôi sẽ thêm một số CSS đơn giản vào mỗi thùng chứa của chúng.

 .social__item {
  Hiển thị: Khối nội tuyến;
  lề phải: 0,05EM;
} 

08. Tạo kiểu biểu tượng được chia sẻ

Để giảm thiểu lượng CSS chúng tôi xuất chúng, chúng tôi sẽ sử dụng bộ chọn CSS3 để tìm tất cả các lớp bắt đầu bằng 'biểu tượng' và tạo một kiểu chia sẻ cho chúng.

 [Lớp ^ = "Biểu tượng"] {
  Font-Family: 'Fontawgie';
  nói: không có;
  Phong cách phông chữ: Bình thường;
  Trọng lượng phông chữ: Bình thường;
  biến thể phông chữ: bình thường;
  Chuyển đổi văn bản: Không có;
  chiều cao dòng: 1;
  -webkit-font-mịn màng: khử mùi;
  -Moz-osx-font-filing: Grayscale; } 

09. Nút phong cách lên nền

Sử dụng cùng một phương thức, chúng tôi sẽ làm tương tự cho các nút xác định các giá trị của chúng tôi trong 'em', cho phép chúng tôi sau đó thay đổi kích thước chúng bằng cách sử dụng thùng chứa.

 [Lớp ^ = "Social__Icon"] {
  Kích thước phông chữ: 1EM; Chiều rộng: 2EM; Chiều cao: 2EM;
  Màu nền: # 333;
  màu trắng;
  Trang trí văn bản: Không có;
  bán kính biên giới: 100%;
  Text-Căn chỉnh: Trung tâm;
  Hiển thị: Flex;
  Căn chỉnh các mặt hàng: trung tâm;
  Nội dung biện minh: Trung tâm;
} 

10. @Each Loop cho các biểu tượng của chúng tôi

Bây giờ chúng tôi có tất cả các kiểu cơ sở của chúng tôi, chúng tôi có thể sử dụng danh sách của chúng tôi để tạo CSS cụ thể cho từng biểu tượng.

Để tạo một vòng lặp trong sass, chúng tôi sử dụng '@each' theo sau là tên cho mỗi giá trị của mỗi mục - '$ icon', '$ unicode' và '$ icon-nền' - theo sau là từ 'in' và sau đó là tên của danh sách.

Bên trong vòng lặp, chúng tôi sẽ áp dụng giá trị 'unicode' cho phần tử 'trước' pseudo của mỗi biểu tượng chúng tôi đã tạo trong HTML, cho phép kiểu chia sẻ mà chúng tôi đã tạo trước đó để chăm sóc tất cả các kiểu khác cần thiết.

 @each $ icon, $ unicode, $ biểu tượng nền
trong $ icon-dist {
  .icon - # {$ icon} {
  & amp; :: trước {
  Nội dung: $ Unicode;
  Không thể
  Không thể
} 

11. @each vòng cho màu nền của chúng tôi

Các biểu tượng hiện đang hoạt động nhưng chúng ta vẫn có màu nền dự phòng. Chúng tôi sẽ thêm một số mã vào danh sách của chúng tôi để khắc phục điều đó. Sử dụng cùng một phương thức như trên, chúng tôi sẽ xuất tên '$ icon' nhưng lần này là trên các lớp '' xã hội '' và bên trong màu '$ icon-nền'.

 @each $ icon, $ unicode, $ biểu tượng nền
trong $ icon-dist {
  ...
  .social__icon - # {$ icon} {
  Màu nền: $ Biểu tượng nền;
  Không thể
} 

12. Sử dụng mixin

Sử dụng mixins chúng tôi đã tạo trước đó và bởi vì chúng tôi tạo kiểu các biểu tượng bằng các giá trị 'em', chúng tôi có thể áp dụng kích thước phông chữ vào bộ chứa và tăng nó bằng cách sử dụng Mixin Truy vấn truyền thông của chúng tôi bằng cách sử dụng '@include' và tên của mixin theo sau là Mã Chúng tôi muốn đưa vào truy vấn Media-Truy vấn.

 .social__container {
  Kích thước phông chữ: 1EM;
  @include viewport - Trung bình {
  Kích thước phông chữ: 1.5EM;
  Không thể
  @include viewport - lớn {
  Kích thước phông chữ: 2EM;
  }} 

13. Thêm các trạng thái tương tác và chức năng tích hợp

Chúng ta có thể thêm một số tương tác vào các nút của chúng tôi bằng cách thay đổi màu nền khi nút được tương tác bằng cách sử dụng chuột hoặc bàn phím.

Sass có một số Chức năng màu tích hợp Cho phép chúng tôi lấy màu nền mà chúng tôi đã đặt trong danh sách của chúng tôi và trộn nó với màu đen để làm tối nút - khi tương tác với.

 - # {$ icon} {
  Màu nền: $ Biểu tượng nền;
  & amp;: di chuột,
  & amp;: tập trung,
  & amp;: Hoạt động {
  màu nền:
  Trộn (Đen, $ Biểu tượng nền, 15%);
  }} 

14. Chuyển đổi màu nền

Chúng ta cũng có thể sử dụng thuộc tính 'Chuyển tiếp' trong CSS để tạo hiệu ứng sự khác biệt giữa các màu nền. Chúng ta có thể sử dụng giá trị 'tất cả' nhưng đó là cả tốn kém về hiệu suất và sẽ không cho phép chúng ta chuyển các giá trị khác nhau ở các thời gian và chức năng thời gian khác nhau.

 [Lớp ^ = "Social__Icon"]Đồn là
  ...
  Chuyển đổi: Màu nền
  150ms dễ dàng vào
  Được;
} 

15. Thêm hiệu ứng chuyển tiếp thêm

Bằng cách thêm định vị 'tương đối' vào các nút và giá trị hàng đầu và thêm 'đầu trang' vào thuộc tính 'chuyển tiếp' của chúng tôi, chúng tôi có thể sẵn sàng các yếu tố để tương tác thêm.

 [Lớp ^ = "Social__Icon"] {
  Chức vụ: Người thân;
  Top: 0;
  ...
  Chuyển đổi: Màu nền
   150ms dễ dàng vào,
    Top 250ms tuyến tính.
  Được; } 

16. Di chuyển các nút lên khi tương tác

Đối với sự tương tác này, không có gì cụ thể cần thiết để tạo ra nó do đó chúng ta có thể thêm mã vào lớp được chia sẻ. Bằng cách áp dụng một giá trị tiêu cực và loại bỏ các phác thảo, chúng ta có một điểm tương tác trực quan rõ ràng hơn.

 [Lớp ^ = "Social__Icon"] {
  ...
  & amp;: di chuột,
  & amp;: tập trung,
  & amp;: Hoạt động {
  Đề cương: Không có;
  TOP: -0.25EM;
  }} 

17. Thêm một bóng thả

Chúng ta cũng có thể sử dụng cùng một phương thức để tạo và hoạt hình 'Bóng tối' - thêm độ sâu hơn một chút vào sự tương tác - thay đổi chiều cao dọc của bóng cùng lúc với giá trị hàng đầu.

 Bóng tối:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0,2);
& amp;: di chuột,
& amp;: tập trung,
& amp;: Hoạt động {
  ...
  Bóng tối:
  0 0,5EM 0,25EM -0.25EM RGBA (0,0,0,0.3);
} 

18. Thêm chú giải công cụ

Chúng ta có thể dễ dàng thêm chú giải công cụ bằng CSS để thêm rõ ràng cho người dùng của mình. Điều đầu tiên chúng ta sẽ làm là thêm giá trị Tooltip vào danh sách. Đảm bảo viết chúng trong dấu ngoặc kép để cho phép sử dụng khoảng trắng nếu được yêu cầu.

 $ Danh sách biểu tượng: (
  Vimeo "Vimeo" "\ F27D" # 1ab7ea,
  Twitter "Twitter" "\ F099" # 1DA1F2,
  ...
  github "github" "\ f113" # 333,
  rss "rss" "\ f09e" # f26522,
); 

19. Sửa đổi vòng lặp @each

Do bổ sung vào danh sách của chúng tôi, chúng tôi sẽ cần sửa đổi vòng lặp '@each' của chúng tôi để bao gồm giá trị Tooltip ('$ TÊN'). Sau đó chúng ta có thể xuất tên đó dưới dạng nội dung của phần tử 'trước pseudo' trên các nút của chúng tôi.

 @each $ biểu tượng, $ tên, $ unicode,
  $ biểu tượng-nền trong $ icon-list {
  ...
  .social__icon - # {$ icon} {
  ...
  & amp; :: trước {
  Nội dung: '# {$ tên}';
  Không thể
  }} 

20. Kiểu các yếu tố Pseudo

Bây giờ chúng ta có tên của từng phần tử được hiển thị trên màn hình, chúng ta cần tạo kiểu phần tử, thêm màu nền, phần đệm và các phần tử tạo kiểu khác - cũng như định vị phần tử và sàng lọc nó để chuyển đổi và sửa đổi độ mờ và giá trị hàng đầu khi tương tác .

 & amp; :: trước {...
  TOP: -3.5EM;
  Opacity: 0;
  Chuyển đổi:
  Top 250ms tuyến tính, độ mờ 150ms 150ms;
Không thể
& amp;: di chuột, ... {...
  & amp; :: trước {
  Opacity: 1;
  TOP: -2.5EM; Không thể
} 

21. Kiểu phần tử sau Pseudo

Chúng tôi sẽ sử dụng Tam giác css. Để tạo phần dưới của các chú giải công cụ của chúng ta - một lần nữa định vị phần tử đã sẵn sàng cho quá trình chuyển đổi - bằng cách chuyển độ mờ và giá trị hàng đầu ở các thời gian khác nhau.

Bằng cách thêm một sự chậm trễ, chúng ta sẽ có một hình ảnh động bao gồm các tooltip mờ dần và di chuyển xuống vị trí.

 & amp; :: sau {...
  TOP: -1.9EM;
  Opacity: 0;
  Chuyển đổi:
  Top 250ms tuyến tính, độ mờ 150ms 150ms;
Không thể
& amp;: di chuột, ... {...
  & amp; :: sau {
  Opacity: 1;
  TOP: -0.9EM; Không thể
} 

Bộ sưu tập Codepen của các bước hướng dẫn có thể được tìm thấy đây .

Bài viết này ban đầu xuất hiện trong tạp chí Web Designer Vấn đề 264. Mua nó ở đây .

Đọc thêm:

• Sass là gì?
• 8 tính năng Codepen bạn không biết về
• 5 mẹo cho CSS siêu nhanh