Cách sử dụng SCSS

---

Ví dụ trong mỗi chương

Công cụ "Hiển thị Sass" của chúng tôi giúp học Sass dễ dàng, nó hiển thị cả mã và kết quả

Ví dụ Sass

/* Xác định các biến và giá trị tiêu chuẩn cho trang web */
$bgcolor. lightblue;
$textcolor. darkblue;
$fontsize. 18px;

/* Sử dụng các biến */
body {
  background-color. $bgcolor;
  màu. $textcolor;
  cỡ chữ. $fontsize;
}

Chạy ví dụ »

---

Việc học của tôi

Theo dõi tiến trình của bạn với chương trình "Học tập của tôi" miễn phí tại W3Schools

Đăng nhập vào tài khoản của bạn và bắt đầu kiếm điểm

Đây là một tính năng tùy chọn. Bạn có thể học W3Schools mà không cần sử dụng My Learning

---

Tham chiếu hàm Sass

Tại W3Schools, bạn sẽ tìm thấy các tài liệu tham khảo đầy đủ về tất cả các hàm Sass với cú pháp và ví dụ

---

Các biểu định kiểu ngày càng lớn hơn, phức tạp hơn và khó bảo trì hơn. Đây là nơi bộ xử lý trước CSS có thể trợ giúp

Sass cho phép bạn sử dụng các tính năng không tồn tại trong CSS, như biến, quy tắc lồng nhau, mixin, nhập, kế thừa, hàm tích hợp và các nội dung khác

---

Một ví dụ đơn giản tại sao Sass lại hữu ích

Giả sử chúng ta có một trang web với ba màu chính

Vì vậy, bạn cần nhập các giá trị HEX đó bao nhiêu lần? . Và những gì về các biến thể của cùng một màu sắc?

Thay vì gõ các giá trị trên nhiều lần, bạn có thể sử dụng Sass và viết cái này

Ví dụ Sass

/* định nghĩa các biến cho màu cơ bản */
$primary_1. #a2b9bc;
$primary_2. #b2ad7f;
$primary_3. #878f99;

/* sử dụng các biến */
. tiêu đề chính {
  màu nền. $primary_1;
}

.menu-left {
  màu nền. $primary_2;
}

.menu-right {
  background-color. $primary_3;
}

Vì vậy, khi sử dụng Sass và màu chính thay đổi, bạn chỉ cần thay đổi nó ở một nơi

---

---

Sass hoạt động như thế nào?

Trình duyệt không hiểu mã Sass. Do đó, bạn sẽ cần một bộ tiền xử lý Sass để chuyển đổi mã Sass thành CSS tiêu chuẩn

Quá trình này được gọi là chuyển mã. Vì vậy, bạn cần cung cấp cho bộ chuyển mã (một loại chương trình nào đó) một số mã Sass và sau đó lấy lại một số mã CSS

Mẹo. Dịch mã là một thuật ngữ để lấy mã nguồn được viết bằng một ngôn ngữ và biến đổi/dịch nó sang ngôn ngữ khác

---

Loại tệp Sass

Các tệp Sass có ". scss" phần mở rộng tập tin

---

bình luận sass

Sass hỗ trợ các bình luận CSS tiêu chuẩn

@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;
           }
       }
   }
}

0 và ngoài ra, nó còn hỗ trợ các bình luận nội tuyến

@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;
           }
       }
   }
}

1

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 muốn tìm hiểu thêm về cách sử dụng Sass để KHÔ CSS của mình, đồng nghiệp Toptaler Justin Brazeau và người đam mê Sass sẽ chỉ 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

Giới thiệu về 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 việc tự do và 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 để sử dụng SCSS trong HTML?

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

Làm cách nào để sử dụng SCSS trong phát triển web?

Làm cách nào để sử dụng SCSS trong vscode?