Làm cách nào để thiết lập scss?

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

1

Cuố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

2

Lư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

4

Bằ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

7

Ngoà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ư

9

Nế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ẻ

FrontEndCSSThemingSCSS

Ngườ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 đồ

Làm cách nào để thiết lập SCSS trong HTML?

Làm thế nào để viết mã SCSS?

Làm cách nào để cài đặt SCSS trong vscode?

Làm cách nào để thiết lập một dự án trong Sass?