Bạn có đang sử dụng SCSS làm bộ tiền xử lý CSS trong dự án của mình không? Show
Chúng tôi sẽ đề cập đến những kiến thức cơ bản về cách chọn các tệp SCSS mà bạn cần cho dự án của mình, thêm Phông chữ Tuyệt vời vào bản biên dịch của bạn, đưa mã vào một lớp bằng Mixins, v.v. Trước khi bạn bắt đầuHãy chắc chắn rằng bạn Thiết lậpBạn sẽ tìm thấy mọi thứ mình cần trong thư mục fontawesome.scssPhông chữ chính Biên dịch tuyệt vờibrands.scssKiểu biểu tượng thương hiệusolid.scssKiểu biểu tượng rắnregular.scssKiểu biểu tượng thông thườnglight.scssKiểu biểu tượng nhẹthin.scssKiểu biểu tượng mỏngsharp-solid.scssKiểu biểu tượng Sharp Solidduotone.scssKiểu biểu tượng Duotone_duotone-icons.scssLớp biểu tượng Duotonefontawesome.scss0Trường hợp các biến được xác định được sử dụng trong suốt quá trình tạo kiểufontawesome.scss1Các tiện ích được sử dụng trong suốt quá trình tạo kiểu/định nghĩa biểu tượng________ 12Cú pháp và định nghĩa của lớp tham chiếu biểu tượng cơ sởfontawesome.scss3Hỗ trợ kích thước biểu tượng chiều rộng hỗ trợfontawesome.scss4Hỗ trợ biểu tượng cố định Thêm phông chữ tuyệt vời vào biên dịch của bạnSao chép thư mục Mở Trong tệp biên dịch SCSS chính của bạn, hãy nhập Phông chữ tuyệt vời bằng cách thêm tệp kiểu cốt lõi, Đây là một ví dụ đơn giản Nếu bạn muốn sử dụng nhiều kiểu hơn, hãy thêm nhiều kiểu nhập hơn Sử dụng biểu tượng DuotoneNếu một dự án sử dụng các biểu tượng Duotone, bạn sẽ cần Ch-chigity Kiểm tra đường dẫn của bạn Đảm bảo đường dẫn phông chữ và thư mục Autoprefixer không được bao gồm trong v6 Để không quá quy định, chúng tôi đã xóa Autoprefixer (opens new window) khỏi các bước biên dịch và xây dựng của chúng tôi. Nếu dự án của bạn cần nó, bạn sẽ cần phải tự thêm nó Thêm biểu tượngKhi bạn đã thêm các mục nhập ở trên và thiết lập và tham chiếu CSS đã biên dịch bao gồm Phông chữ tuyệt vời trong dự án của mình, bạn có thể thêm các biểu tượng vào HTML của dự án Đây là một ví dụ về cách tham chiếu các biểu tượng bằng CSS được biên dịch và lưu trữ của bạn Tùy chỉnh SCSS theo lệnh của bạn Bất kỳ thay đổi nào đối với Phông chữ Tuyệt vời (e. g. thay đổi tiền tố Quy tắc CSS dựa trên SCSS tùy chỉnhNếu bạn muốn sử dụng bất kỳ hoặc tiện ích nào của chúng tôi, bạn có thể tận dụng phương pháp Phần tử giả CSS của chúng tôi để thêm biểu tượng vào dự án của bạn để thực hiện. Phương pháp này cũng hữu ích khi thay đổi HTML trong dự án của bạn không phải là một tùy chọn Bằng cách sử dụng các mixin Trộn phong cáchĐể sử dụng các mixin kiểu, bạn sẽ muốn
Style Mixins Bao gồm cả Set Up Styles Các mixin kiểu này cũng xử lý các kiểu hiển thị cơ bản mà chúng tôi tích hợp trong bộ công cụ của mình để đảm bảo các biểu tượng hiển thị hoàn hảo trong ngữ cảnh của chúng và trong trình duyệt Mixin gia đìnhNếu bạn đang sử dụng mixin của chúng tôi để hiển thị một biểu tượng trong một họ cụ thể, chẳng hạn như của chúng tôi, thì bạn sẽ cần tham chiếu đến họ mixin phù hợp (e. g. solid.scss4Gói miễn phíCổ điển khi được sử dụng với các mixin theo phong cách khácsolid.scss5Chỉ chuyên nghiệpSắc nét khi được sử dụng với các mixin theo phong cách khácMột cách tiếp cận CSS tùy chỉnh thủ công hơnNếu bạn muốn một cách tiếp cận có thể tùy chỉnh hơn khi tuân thủ các quy tắc tạo kiểu của mình, thì chúng tôi đã cung cấp các tiện ích được sử dụng trong các mixin kiểu để có được kết quả hiển thị tương tự Để viết các quy tắc thủ công, bạn sẽ muốn
Mixins bao gồmTiện ích Nó làm gìregular.scss1Một mixin ẩn trực quan phần tử chứa văn bản tương đương với một biểu tượng trong khi vẫn giữ cho nó có thể truy cập được bằng các công nghệ hỗ trợregular.scss2Một mixin được sử dụng cùng với regular.scss1 để hiển thị lại phần tử khi nó được đặt tiêu điểm (e. g. bởi người dùng chỉ sử dụng bàn phím)regular.scss4Một mixin chứa tất cả kiểu cơ sở được thiết lập cho một biểu tượng (trừ kiểu của biểu tượng và tên cụ thể/unicode) biên dịchregular.scss5regular.scss6regular.scss7regular.scss8regular.scss9light.scss0Mixins that contain all of the base style set up for an icon along with a specific style to render the icon insolid.scss5solid.scss4Mixins that, when combined with light.scss3 style mixins, define the family of styles to be used.light.scss4A mixin to make referencing icons via the CSS light.scss5 property a bit easier.Biến của biểu tượng phải được chuyển vào (e. g. light.scss6). Đơn giản hóa và tùy chỉnh với các biếnPhiên bản SCSS của Font Awesome cũng tận dụng một số biến SCSS (mở cửa sổ mới) cho phép thiết lập và tùy chỉnh bộ công cụ tạo kiểu của chúng tôi dễ dàng hơn Tôi có thể sử dụng phản ứng với SCSS không?Tôi có thể sử dụng Sass không? . Bây giờ bạn đã sẵn sàng đưa các tệp Sass vào dự án của mình
Bạn có thể nhập trong SCSS không?Quá trình nhập tệp CSS thông thường vào tệp SCSS. Bạn có thể tạo bất kỳ số lượng tệp CSS và SCSS nào và bạn có thể sử dụng chúng bằng cách sử dụng từ khóa 'nhập' . Ví dụ: tạo một tệp CSS và nhập tệp đó vào tệp SCSS, sau đó bạn có thể sử dụng thuộc tính đó trong dự án của mình.
Việc sử dụng chức năng @import trong SASS là gì?Hàm SASS @import giúp chúng tôi nhập nhiều biểu định kiểu SASS hoặc CSS cùng nhau để chúng có thể được sử dụng cùng nhau . Nhập tệp SASS bằng quy tắc @import cho phép truy cập mixin, biến và hàm vào tệp khác trong đó tệp khác được nhập.
Sự khác biệt giữa @USE và @import trong SCSS là gì?Về cơ bản, cả hai quy tắc đều làm giống nhau - tải thành viên bên trong mô-đun khác. Sự khác biệt chính là cách họ đối xử với các thành viên . @import làm cho mọi thứ có thể truy cập được trên toàn cầu trong tệp đích. |
