Có một số cách để cài đặt Sass trong hệ thống của bạn. Có nhiều ứng dụng sẽ giúp bạn thiết lập và chạy với Sass trong vài phút cho Mac, Windows và Linux. Một số trong số này là miễn phí, nhưng một số là ứng dụng trả phí
Khi nói đến chủ đề; . Trong hướng dẫn này về SCSS, chúng tôi sẽ tạo một chủ đề tối thiểu và sử dụng SCSS để cung cấp cho chương trình CSS của chúng tôi một số siêu năng lực
Qua
Fernando Rivas
Fernando có hơn 10 năm kinh nghiệm trong lĩnh vực phát triển front-end, lần đầu tiên làm việc cho công ty của chính mình, sau đó là một freelancer và một nhân viên
CHIA SẺ
CHIA SẺ
Phát triển biểu định kiểu với Sass, ngay cả khi sử dụng các tính năng cơ bản nhất của nó, như các thuộc tính hoặc biến lồng nhau, giúp tiết kiệm thời gian quý báu và giúp các nhà phát triển giao diện người dùng dễ dàng hơn. Không có gì ngạc nhiên khi bộ tiền xử lý CSS đã được áp dụng rộng rãi như một cách thực tế để tạo kiểu cho các trang web và ứng dụng;
Khi nói đến chủ đề; . Trong hướng dẫn SCSS này, chúng tôi sẽ tạo một chủ đề tối thiểu và sử dụng SCSS để cung cấp cho chương trình CSS của chúng tôi một số siêu năng lực
Cách tiếp cận Mixin cơ bản
Giả sử chúng ta có bố cục sau
Left
Right
Button
Chúng tôi đã được yêu cầu tạo nhiều chủ đề cho nó. Chủ đề phải thay đổi màu sắc cho tất cả các vùng chứa [bao gồm cả vùng chứa chính] và nút, đồng thời chủ đề sẽ được xác định bởi một lớp trong phần thân hoặc cũng có thể là vùng chứa "bên ngoài".
Hãy xây dựng một mixin có tên là “themable” sẽ chứa bảng màu của chúng ta làm tham số
@mixin themable[$theme-name, $container-bg, $left-bg, $right-bg, $innertext, $button-bg] {
.#{$theme-name} {
.container {
background-color: $container-bg;
border: 1px solid #000;
display: flex;
height: 500px;
justify-content: space-between;
margin: 0 auto;
padding: 1em;
width: 50%;
* {
color: $innertext;
font-size: 2rem;
}
.left {
background-color: $left-bg;
height: 100%;
width: 69%;
}
.right {
background-color: $right-bg;
height: 100%;
position: relative;
width: 29%;
}
.button {
background-color: $button-bg;
border: 0;
border-radius: 10px;
bottom: 10px;
cursor: pointer;
font-size: 1rem;
font-weight: bold;
padding: 1em 2em;
position: absolute;
right: 10px;
}
}
}
}
Sau đó, sử dụng nó để tạo chủ đề của chúng tôi
@include themable[theme-1, #f7eb80, #497265, #82aa91, #fff, #bc6a49];
@include themable[theme-2, #e4ada7, #d88880, #cc6359, #fff, #481b16];
Tại thời điểm này, chúng tôi đã tiết kiệm được rất nhiều thời gian nhưng có một số vấn đề với cách tiếp cận này.
Chủ đề thường có nhiều thuộc tính khác nhau bên cạnh màu sắc. Ví dụ: nếu chúng tôi muốn sửa đổi chủ đề Bootstrap, việc viết một mixin theo “công thức” trước đó sẽ khó bảo trì và mã khó đọc. Ngoài ra, chúng tôi không thực sự tuân theo các phương pháp hay nhất của Sass—ví dụ: nhập mã màu hex trực tiếp vào mixin
Thiết kế sơ đồ kiểu với Sass Maps
Với sự trợ giúp của bản đồ, chủ yếu giống như các mảng được lập chỉ mục chính, chúng tôi có thể xây dựng một bộ kiểu có ý nghĩa, có ý nghĩa hơn cho chủ đề của mình, điều này sẽ dễ dàng hơn cho các nhà phát triển đồng nghiệp của chúng tôi duy trì và hiểu. Chúng tôi cũng có thể sử dụng danh sách, nhưng cá nhân tôi thấy bản đồ phù hợp hơn cho mục đích này. Danh sách không có khóa trong khi các khóa có thể tự giải thích được
Bản đồ cho cách tiếp cận mới của chúng tôi sẽ là một bản đồ lồng nhau
$theme-1: [
container: [
bg: #e4ada7,
color: #000,
border-color: #000
],
left: [
bg: #d88880,
color: #fff,
height: 100%,
width: 69%
],
right: [
bg: #cc6359,
color: #fff,
height: 100%,
width: 29%
],
button: [
bg: #481b16,
color: #fff
]
];
Nếu chúng tôi muốn truy cập từng phần của lược đồ
1 và các bản đồ phụ của nó, chúng tôi sử dụng chỉ thị
2 để lặp qua từng phần đó@each $section, $map in $theme-1
3 sẽ trả về khóa của phần hiện tại và
4 sẽ trả về bản đồ lồng nhau tương ứng với khóa đóSau đó, chúng ta có thể truy cập các thuộc tính của từng bản đồ, giả sử thuộc tính nền [bg], sử dụng hàm
5
1Cuối cùng, kết hợp mixin mới của chúng tôi, dựa trên cấu trúc bản đồ của chúng tôi, chúng tôi có thể tạo bao nhiêu chủ đề tùy thích
2Lưu ý rằng chúng tôi cũng đang sử dụng chỉ thị
6 để phân biệt các thuộc tính cho các phần không phải là nút
4Bằng cách này, chúng ta có thể thêm các thuộc tính khác nhau cho một số phần để tạo các thuộc tính cụ thể hoặc thậm chí các quy tắc hoặc chúng ta có thể phân biệt giữa một khóa có một giá trị với một giá trị khác bằng bản đồ lồng nhau
Chủ đề của chúng tôi cũng có thể bao gồm nhiều bản đồ được sử dụng bởi một số mixin, được áp dụng trong các phần khác nhau của biểu định kiểu của chúng tôi. Tất cả phụ thuộc vào mức độ phức tạp của cách bố trí cơ sở của chúng tôi và tất nhiên, cách tiếp cận cá nhân của chúng tôi
Tối ưu hóa hơn nữa
Sass cung cấp các chức năng tích hợp hữu ích để tiết kiệm cho chúng tôi nhiều công việc hơn;
Chúng tôi có thể sửa đổi mã nút để làm sáng nền của nó khi di chuột, bất kể màu nền ban đầu là gì. Bằng cách này, chúng ta không phải thêm màu khác cho trạng thái này
7Ngoài ra, với việc sử dụng các mô-đun Sass, mã của chúng tôi có thể dễ đọc hơn và có thể mở rộng hơn;
0Điều này sẽ yêu cầu các mô-đun được đặt trong dự án như
9Nếu bạn quan tâm đến việc tìm hiểu thêm về cách sử dụng Sass để KHÔ CSS của bạn, đồng nghiệp Toptaler Justin Brazeau và người đam mê Sass sẽ thảo luận về điều này trong bài viết tuyệt vời của anh ấy Sass Mixins. Giữ các biểu định kiểu của bạn KHÔ
Hiểu những điều cơ bản
Sass là gì?
Syntactally Awesome Style Sheets [Sass] là một siêu bộ CSS cung cấp cho bạn các tính năng kiểu lập trình và biên dịch trước thành CSS
Sự khác biệt giữa Sass và SCSS là gì?
Kể từ Sass 3, cú pháp Sass mới và phần mở rộng tệp được gọi là SCSS
Thẻ
FrontEndCSSThemingSCSSNgười làm việc tự do? Tìm công việc tiếp theo của bạn.
Công việc tự do từ xa
Xem thông tin đầy đủ
Fernando Rivas
Kỹ sư Front-End
Thông tin về các Tác giả
Fernando có hơn 10 năm kinh nghiệm trong lĩnh vực phát triển front-end, lần đầu tiên làm việc cho công ty của chính mình, sau đó là một người làm việc tự do và một nhân viên, tham gia vào nhiều dự án khác nhau. Hiện tại, anh ấy chuyên kiểm tra các công cụ React + TypeScript/ES6, Jest và React Redux và SASS. Anh ấy có kinh nghiệm với PHP, jQuery và các ứng dụng web di động
Thuê Fernando
Bình luận
Sudhakar Krishnan
Tốt
Sudhakar Krishnan
Tốt
Ersin Makaryos
tốt đấy
Ersin Makaryos
tốt đấy
Ritesh Jha
hướng dẫn tốt. Đây là danh sách các lựa chọn thay thế Bootstrap - https. // ghi chúbaba. com/top-năm-bootstrap-thay thế/
Ritesh Jha
hướng dẫn tốt. Đây là danh sách các lựa chọn thay thế Bootstrap - https. // ghi chúbaba. com/top-năm-bootstrap-thay thế/
Mukesh Kamath
bài viết tuyệt vời. phần đầu tiên của việc sử dụng mixin đã rõ ràng. Sự hiểu biết của tôi về bản đồ còn yếu nên tôi gặp khó khăn trong việc xoay sở với việc sử dụng các vòng lặp @each và phương thức lấy bản đồ