Mô-đun SCSS

Dự án này hỗ trợ các Mô-đun CSS cùng với các biểu định kiểu thông thường bằng cách sử dụng quy ước đặt tên tệp

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

Mẹo. Nếu bạn muốn xử lý trước biểu định kiểu bằng Sass thì hãy đảm bảo làm theo hướng dẫn cài đặt và sau đó thay đổi phần mở rộng tệp biểu định kiểu như sau.

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

2 hoặc

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

3

Mô-đun CSS cho phép bạn sử dụng cùng một tên lớp CSS trong các tệp khác nhau mà không phải lo lắng về xung đột đặt tên. Tìm hiểu thêm về Mô-đun CSS tại đây

<!-- This button has red background but not red text --><button class="Button_error_ax7yz">Error Button</button>4​

.error {
  background-color: red;
}

.error { color: red;}0​

.error {
  color: red;
}

.error { color: red;}1​

import React, { Component } from 'react';
import styles from './Button.module.css'; // Import css modules stylesheet as styles
import './another-stylesheet.css'; // Import regular stylesheet

class Button extends Component {
  render() {
    // reference as a js object
    return <button className={styles.error}>Error Button</button>;
  }
}

kết quả

Không có xung đột từ các tên lớp

.error {
  color: red;
}

<!-- This button has red background but not red text -->
<button class="Button_error_ax7yz">Error Button</button>

Đây là một tính năng tùy chọn. Các tệp CSS và biểu định kiểu

.error {
  color: red;
}

.error {
  color: red;
}

Tiếp theo. js cung cấp cho chúng tôi Mô-đun CSS theo mặc định, cung cấp các lợi ích như kiểu có phạm vi và phát triển tập trung trong ứng dụng của chúng tôi. Làm thế nào chúng ta có thể cung cấp Tiếp theo của chúng tôi. js siêu năng lực CSS với Sass?

• Mô-đun CSS là gì?
• Sass là gì?
• Chúng ta sẽ xây dựng cái gì?
• Bước 0. Tạo một Tiếp theo mới. ứng dụng js
• Bước 1. Cài đặt Sass trong phần tiếp theo. ứng dụng js
• Bước 2. Nhập tệp Sass vào Tiếp theo. ứng dụng js
• Bước 3. Sử dụng các biến Sass trong Tiếp theo. ứng dụng js
• Bước 4. Sử dụng mixin Sass với nhập khẩu toàn cầu trong Tiếp theo. js

Mô-đun CSS là gì?

Các mô-đun CSS về cơ bản là các tệp CSS, khi được nhập vào các dự án JavaScript, sẽ cung cấp các kiểu được đặt trong phạm vi của phần cụ thể đó của dự án theo mặc định

Khi nhập mô-đun của bạn, các lớp được biểu thị bằng một đối tượng được ánh xạ với từng tên lớp, cho phép bạn áp dụng lớp đó ngay cho dự án của mình

Chẳng hạn, nếu tôi có một mô-đun CSS cho tiêu đề trang của mình

.title {
  color: blueviolet;
}

Và tôi nhập nó vào dự án React của mình

.error {
  color: red;
}

Sau đó tôi có thể áp dụng quyền tiêu đề đó cho một phần tử như thể nó là một chuỗi

.error {
  color: red;
}

Bằng cách tạo kiểu theo phạm vi, bạn không còn phải lo lắng về việc phá vỡ các phần khác của ứng dụng với kiểu xếp tầng. Việc quản lý các đoạn mã nhỏ hơn liên quan đến một phần cụ thể của ứng dụng cũng dễ dàng hơn

Sass là gì?

Sass là một phần mở rộng của ngôn ngữ CSS cung cấp các tính năng mạnh mẽ như biến, hàm và các hoạt động khác cho phép bạn dễ dàng xây dựng các tính năng phức tạp hơn trong dự án của mình

Ví dụ: nếu tôi muốn lưu màu ở trên vào một biến để sau này tôi có thể dễ dàng thay đổi, tôi có thể thêm

.error {
  color: red;
}

Nếu tôi muốn thay đổi màu đó nhưng chỉ ở một điểm, tôi có thể sử dụng các chức năng màu tích hợp để thay đổi sắc thái

.error {
  color: red;
}

Một lợi ích bổ sung là khả năng lồng các kiểu. Điều này cho phép tổ chức CSS của bạn dễ dàng hơn, hợp lý hơn

Chẳng hạn, nếu tôi chỉ muốn thay đổi một phần tử

.error {
  color: red;
}

.error {
  color: red;
}

Chúng ta sẽ xây dựng cái gì?

Chúng ta sẽ tạo một ứng dụng React mới bằng Next. js

Với ứng dụng mới của chúng tôi, chúng tôi sẽ tìm hiểu cách cài đặt và định cấu hình Sass để chúng tôi có thể tận dụng các tính năng của nó trong Next. js

Sau khi thiết lập Sass, chúng ta sẽ hướng dẫn cách sử dụng các biến Sass và mixins để tạo lại một số thành phần mặc định của Next. giao diện người dùng js

Bạn muốn bỏ qua hướng dẫn và đi sâu vào mã? . js Sass Starter trên GitHub. https. //github. com/colbyfayock/next-sass-starter

Bước 0. Tạo một Tiếp theo mới. ứng dụng js

Để bắt đầu với một Tiếp theo mới. js, chúng ta có thể sử dụng Tạo ứng dụng tiếp theo

Trong thiết bị đầu cuối của bạn, điều hướng đến nơi bạn muốn tạo dự án mới và chạy

.error {
  color: red;
}

Ghi chú. bạn có thể sử dụng npm thay vì yarn cho bất kỳ ví dụ nào về cài đặt và quản lý gói

Khi quá trình cài đặt kết thúc, bạn có thể điều hướng vào thư mục và khởi động máy chủ phát triển của mình

.error {
  color: red;
}

Điều gì sẽ bắt đầu Tiếp theo mới của bạn. dự án js tại http. //máy chủ cục bộ. 3000

Nếu đây là lần đầu tiên bạn tạo một Next mới. ứng dụng js, hãy xem xung quanh. Nó đi kèm với một trang chủ cơ bản cũng như hai tệp CSS

• .error {
    color: red;
  }
  

  15

• .error {
    color: red;
  }
  

  16

Ở đây chúng tôi sẽ tập trung vào tệp nhà. Nếu bạn nhìn vào bên trong

.error {
  color: red;
}

Tiếp theo. js có các Mô-đun CSS được tích hợp sẵn theo mặc định. Điều này có nghĩa là khi chúng tôi nhập tệp kiểu nhà của mình, các lớp CSS sẽ được thêm vào đối tượng kiểu và chúng tôi áp dụng từng tên lớp đó cho các phần tử React từ đối tượng đó, chẳng hạn như

.error {
  color: red;
}

Điều đó có nghĩa là các kiểu của chúng tôi nằm trong phạm vi một trang đó

Để tìm hiểu thêm về Mô-đun CSS hoặc hỗ trợ tích hợp trong Tiếp theo. js, bạn có thể xem các tài nguyên sau

• https. //github. com/css-mô-đun/css-mô-đun
• https. // nextjs. org/docs/tính năng cơ bản/hỗ trợ css tích hợp

Bước 1. Cài đặt Sass trong phần tiếp theo. ứng dụng js

Trong khi tiếp theo. js đi kèm với một số hỗ trợ CSS tích hợp tốt, nó không đi kèm với Sass được tích hợp hoàn toàn

May mắn thay, để có được Sass và chạy bên trong Next của chúng tôi. js, tất cả những gì chúng ta cần làm là cài đặt gói Sass từ npm, gói này sẽ cho phép Next. js bao gồm các tệp đó trong đường dẫn của nó

Để cài đặt Sass, hãy chạy phần sau bên trong dự án của bạn

.error {
  color: red;
}

Và nếu chúng tôi khởi động lại máy chủ phát triển của mình và tải lại trang, chúng tôi sẽ thực sự nhận thấy rằng chưa có gì xảy ra, đó là một điều tốt

Nhưng tiếp theo, chúng ta sẽ tìm hiểu cách tận dụng sức mạnh siêu việt của CSS

Tuân theo cam kết

Bước 2. Nhập tệp Sass vào Tiếp theo. ứng dụng js

Bây giờ Sass đã được cài đặt, chúng tôi đã sẵn sàng để sử dụng nó

Tuy nhiên, để bạn sử dụng bất kỳ tính năng nào dành riêng cho Sass, chúng tôi sẽ cần sử dụng các tệp Sass có phần mở rộng

.error {
  color: red;
}

.error {
  color: red;
}

.error {
  color: red;
}

Để bắt đầu, bên trong

.error {
  color: red;
}

.error {
  color: red;
}

Và khi tải lại trang, như chúng ta có thể mong đợi, trang thực sự bị hỏng

Để khắc phục điều này, hãy đổi tên tệp

.error {
  color: red;
}

đến

.error {
  color: red;
}

Sự khác biệt là chúng tôi đang thay đổi phần mở rộng tệp từ

.error {
  color: red;
}

.error {
  color: red;
}

Khi trang tải lại, chúng tôi sẽ thấy rằng Tiếp theo của chúng tôi. js đang tải và sẵn sàng hoạt động trở lại

Ghi chú. Chúng tôi sẽ không đề cập đến tệp kiểu chung ở đây – bạn có thể làm điều tương tự bằng cách đổi tên tệp kiểu toàn cầu và cập nhật phần nhập bên trong của

.error {
  color: red;
}

Tiếp theo, chúng ta sẽ tìm hiểu cách sử dụng các tính năng của Sass cho phần Tiếp theo của chúng ta. ứng dụng js

Tuân theo cam kết

Bước 3. Sử dụng các biến Sass trong Tiếp theo. ứng dụng js

Bây giờ chúng tôi đang sử dụng Sass trong dự án của mình, chúng tôi có thể bắt đầu sử dụng một số tính năng cơ bản như biến

Để hiển thị cách thức hoạt động của tính năng này, chúng tôi sẽ cập nhật màu xanh bên trong ứng dụng của chúng tôi thành màu yêu thích của tôi, màu tím

Ở đầu

.error {
  color: red;
}

.error {
  color: red;
}

Màu

.error {
  color: red;
}

Tiếp theo, cập nhật từng vị trí sử dụng màu đó trong tệp CSS gia đình của chúng tôi thành các biến mới, chẳng hạn như thay đổi

.error {
  color: red;
}

đến

.error {
  color: red;
}

Nếu chúng tôi làm mới trang, sẽ không có gì thay đổi

Nhưng bây giờ vì chúng tôi đang sử dụng một biến để xác định màu đó nên chúng tôi có thể dễ dàng thay đổi nó

Ở đầu trang, thay đổi biến

.error {
  color: red;
}

.error {
  color: red;
}

Và khi trang tải lại, chúng ta có thể thấy rằng màu của chúng ta hiện là màu tím

Các biến chỉ là bước khởi đầu cho các siêu năng lực mà Sass mang lại cho CSS của chúng ta, nhưng chúng ta có thể thấy rằng chúng cho phép chúng ta dễ dàng quản lý màu sắc hoặc các giá trị khác trong ứng dụng của mình

Tuân theo cam kết

Bước 4. Sử dụng mixin Sass với nhập khẩu toàn cầu trong Tiếp theo. js

Một trong nhiều tính năng khác của Sass là mixins. Chúng cung cấp cho chúng tôi khả năng tạo các định nghĩa giống như chức năng, cho phép chúng tôi định cấu hình các quy tắc mà chúng tôi có thể lặp lại và sử dụng trong ứng dụng của mình

Trong ví dụ của chúng tôi, chúng tôi sẽ tạo một mixin mới cho phép chúng tôi tạo các kiểu đáp ứng bằng cách sử dụng truy vấn phương tiện trong ứng dụng của chúng tôi. Mặc dù chúng tôi đã có thể làm điều đó chỉ với một truy vấn phương tiện, nhưng việc sử dụng mixin cho phép chúng tôi sử dụng một định nghĩa duy nhất, giữ cho định nghĩa đó nhất quán và cho phép chúng tôi quản lý định nghĩa đáp ứng đó từ một nơi

Vì mixin này là thứ mà chúng tôi muốn sử dụng trong toàn bộ ứng dụng của mình, nên chúng tôi cũng có thể sử dụng một tính năng khác của Sass, đó là khả năng nhập tệp

Để bắt đầu, hãy tạo một tệp mới trong thư mục

.error {
  color: red;
}

.error {
  color: red;
}

Chúng tôi đang sử dụng dấu gạch dưới trước tên tệp của mình để biểu thị rằng đó là một phần

Tiếp theo, bên trong tệp

.error {
  color: red;
}

.error {
  color: red;
}

Sau khi tải lại trang, chúng tôi sẽ nhận thấy không có gì thay đổi

Nếu chúng ta nhìn vào phần cuối của

.error {
  color: red;
}

.error {
  color: red;
}

Bên trong

.error {
  color: red;
}

.error {
  color: red;
}

Ghi chú. mặc dù chúng tôi có thể nghĩ ra một cái tên hay hơn cho mixin này so với máy tính để bàn, nhưng chúng tôi sẽ sử dụng tên đó làm cơ sở cho ví dụ của chúng tôi

.error {
  color: red;
}

Để kiểm tra điều này, hãy quay lại tệp

.error {
  color: red;
}

.error {
  color: red;
}

.error {
  color: red;
}

Nếu chúng tôi mở ứng dụng của mình sao lưu và thu nhỏ cửa sổ trình duyệt, chúng tôi có thể thấy rằng chúng tôi vẫn có các kiểu phản hồi của mình

Chúng ta thậm chí có thể tiến thêm một bước nữa. Sass cho phép bạn lồng các kiểu. Ví dụ, thay vì viết

.error {
  color: red;
}

Chúng ta có thể bao gồm định nghĩa

.error {
  color: red;
}

.error {
  color: red;
}

.error {
  color: red;
}

Định nghĩa img đó sẽ biên dịch thành

.error {
  color: red;
}

Vì vậy, với ý nghĩ đó, chúng ta có thể sử dụng khái niệm tương tự và chuyển mixin máy tính để bàn của chúng ta vào lớp

.error {
  color: red;
}

.error {
  color: red;
}

Và nếu bạn để ý, vì chúng ta đã ở bên trong lớp

.error {
  color: red;
}

Điều này cho phép tổ chức các phong cách đáp ứng của chúng tôi dễ dàng hơn nhiều

Cuối cùng, nếu chúng tôi nhìn lại ứng dụng của mình, chúng tôi sẽ nhận thấy rằng vẫn không có gì thay đổi, điều đó có nghĩa là chúng tôi đang sử dụng thành công mixin Sass của mình

Tuân theo cam kết

Chúng ta có thể làm gì khác với Sass và Next. js?

Chúng tôi chỉ làm trầy xước bề mặt ở đây với Sass. Bởi vì các mô-đun CSS của chúng tôi hiện có sức mạnh của Sass, nên chúng tôi có rất nhiều khả năng không có sẵn theo mặc định với CSS

Chức năng màu

Sass có rất nhiều chức năng được tích hợp sẵn cho phép chúng ta điều khiển màu sắc, trộn và kết hợp các sắc thái dễ dàng hơn nhiều

Hai cái mà tôi thường sử dụng là làm tối và làm sáng, cho phép bạn lấy màu và thay đổi bóng râm

Tìm hiểu thêm về tất cả các chức năng màu có sẵn trong Sass

Chức năng tùy chỉnh

Mặc dù mixin có vẻ giống như các hàm, nhưng chúng ta có thể xác định các hàm thực sự trong Sass cho phép chúng ta thực hiện các hoạt động phức tạp và tạo ra các giá trị dựa trên đầu vào

Tìm hiểu thêm về các chức năng tùy chỉnh trong Sass

Các loại giá trị khác

Mặc dù hầu hết thời gian với CSS, chúng tôi đang sử dụng các chuỗi hoặc số, nhưng chúng tôi thấy rằng một phần mở rộng đơn giản của điều đó là khả năng sử dụng các biến

Ngoài các biến, Sass cung cấp cho chúng ta nhiều loại giá trị hơn như Bản đồ, có chức năng giống như một đối tượng và Danh sách, giống như các mảng

Tìm hiểu thêm về các loại giá trị trong Sass

Hơn

Có rất nhiều tính năng có sẵn trong Sass và rất nhiều bài viết đề cập đến các tính năng được sử dụng nhiều nhất. Hãy dành chút thời gian để khám phá tài liệu và tìm những gì đang có

• 🐦 Theo dõi tôi trên Twitter
• 📺 Đăng ký Youtube của tôi
• 📫 Đăng ký nhận bản tin của tôi
• 💝 Tài trợ cho tôi

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Colby Fayock

Kỹ sư Front End và Nhà thiết kế UX đam mê giải quyết những thách thức có thể biến thế giới thành một nơi tốt đẹp hơn. https. //www. colbyfayock. com/bản tin/

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Tệp SCSS mô-đun là gì?

Tôi có thể sử dụng SCSS trong các mô-đun CSS không?

Công dụng của SCSS là gì?

Làm cách nào để nhập SCSS trong HTML?