Bạn có thể sử dụng scss trong phản ứng gốc không?

Với React Native, bạn tạo kiểu cho ứng dụng của mình bằng JavaScript. Tất cả các thành phần cốt lõi đều chấp nhận một giá đỡ có tên style. Tên kiểu và giá trị thường khớp với cách CSS hoạt động trên web, ngoại trừ tên được viết bằng cách sử dụng cách viết hoa lạc đà, v.v. g. backgroundColor thay vì background-color

Prop style có thể là một đối tượng JavaScript cũ đơn giản. Đó là những gì chúng tôi thường sử dụng cho mã ví dụ. Bạn cũng có thể chuyển một mảng các kiểu - kiểu cuối cùng trong mảng được ưu tiên, vì vậy bạn có thể sử dụng kiểu này để kế thừa các kiểu

Khi một thành phần ngày càng phức tạp, việc sử dụng StyleSheet.create để xác định một số kiểu ở một nơi thường sẽ gọn gàng hơn. Đây là một ví dụ

Một mẫu phổ biến là làm cho thành phần của bạn chấp nhận một giá trị style, từ đó được sử dụng để tạo kiểu cho các thành phần con. Bạn có thể sử dụng điều này để tạo kiểu "xếp tầng" theo cách chúng thực hiện trong CSS

Có rất nhiều cách khác để tùy chỉnh kiểu văn bản. Kiểm tra tài liệu tham khảo thành phần Văn bản để biết danh sách đầy đủ

Bây giờ bạn có thể làm cho văn bản của bạn đẹp. Bước tiếp theo để trở thành chuyên gia phong cách là học cách kiểm soát kích thước thành phần

Nếu bạn sử dụng create-react-app trong dự án của mình, bạn có thể dễ dàng cài đặt và sử dụng Sass trong các dự án React của mình

Cài đặt Sass bằng cách chạy lệnh này trong thiết bị đầu cuối của bạn

Bây giờ bạn đã sẵn sàng đưa các tệp Sass vào dự án của mình

Tạo một tệp Sass

Tạo tệp Sass giống như cách bạn tạo tệp CSS, nhưng tệp Sass có phần mở rộng tệp là .scss

Sass (các biểu định kiểu cú pháp tuyệt vời) là một phần mở rộng của CSS với các tính năng bổ sung giúp nó mạnh mẽ hơn. Điều tốt nhất về Sass là khả năng tương thích với CSS, có nghĩa là bạn có thể sử dụng nó trong các dự án phát triển web của mình với các khung JavaScript như React

Tuy nhiên, không giống như vanilla CSS, bạn cần thiết lập một chút để sử dụng Sass. Tìm hiểu cách thức hoạt động của nó bằng cách thiết lập một React đơn giản. js và tích hợp Sass với nó

Cách sử dụng Sass trong React của bạn. dự án js

Giống như các bộ xử lý CSS khác, Sass không được hỗ trợ bởi React. Để sử dụng Sass trong React, bạn cần cài đặt phần phụ thuộc của bên thứ ba thông qua trình quản lý gói như yarn hoặc npm

Bạn có thể kiểm tra xem npm hoặc yarn đã được cài đặt trên máy cục bộ của mình hay chưa bằng cách chạy npm --version hoặc yarn --version. Nếu bạn không thấy số phiên bản trong thiết bị đầu cuối của mình, trước tiên hãy cài đặt npm hoặc sợi

Tạo phản ứng. dự án js

Để làm theo hướng dẫn này, bạn có thể thiết lập một React đơn giản. ứng dụng js sử dụng ứng dụng tạo-phản ứng

First, use a command line to navigate to the folder you want to create your React project in. Then run npx create-react-app . Once the process finishes, enter the app directory using cd . Add the following content to your App.js file as a starter:

 import React from "react"; 
import "./App.scss"; 
function App() { 
return ( 
 <div className="wrapper"> 
  <h1>Using Sass in Reacth1> 
  <header className="wrapper__btns"> 
   <button>Blue Buttonbutton> 
   <button>Red Buttonbutton> 
   <button>Green Buttonbutton> 
  header> 
 div> ); 
} 
export default App; 

Khi bạn đã thiết lập một dự án React cơ bản, đã đến lúc tích hợp Sass

Cài đặt Sass

Bạn có thể cài đặt Sass qua npm hoặc yarn. Cài đặt nó qua yarn bằng cách chạy yarn add sass hoặc, nếu bạn thích npm, hãy chạy npm install sass. Trình quản lý gói của bạn sẽ thêm phiên bản mới nhất của Sass vào danh sách phụ thuộc trong gói của dự án. tập tin json

Đổi tên. tập tin css để. scss hoặc. ngổ ngáo

Trong thư mục của dự án, đổi tên Ứng dụng. css và chỉ mục. css vào ứng dụng. scss và chỉ mục. scss, tương ứng

Sau khi bạn đã đổi tên các tệp đó, bạn cần cập nhật các mục nhập trong Ứng dụng của mình. js và chỉ mục. js để khớp với phần mở rộng tệp mới như sau

 import "./index.scss";
import "./App.scss"; 

Từ thời điểm này trở đi, bạn nên sử dụng. tiện ích mở rộng scss cho bất kỳ tệp kiểu nào bạn tạo

Nhập và sử dụng biến và mixin

Một trong những lợi thế quan trọng nhất của Sass là nó giúp bạn viết các kiểu rõ ràng, có thể tái sử dụng bằng cách sử dụng các biến và mixin. Mặc dù có thể không rõ ràng về cách bạn có thể làm điều tương tự trong React, nhưng nó không quá khác biệt so với việc sử dụng Sass trong các dự án được viết bằng JavaScript và HTML đơn giản

Đầu tiên, tạo một thư mục Styles mới trong thư mục src của bạn. Trong thư mục Styles, tạo hai tệp. _biến. scss và _mixin. scss. Thêm các quy tắc sau vào _variables. scss

 $background-color: #f06292;
$text-color: #f1d3b3;
$btn-width: 120px;
$btn-height: 40px;
$block-padding: 60px; 

Và thêm phần sau vào _mixins. scss

 @mixin vertical-list {
    display: flex;
    align-items: center;
    flex-direction: column;
} 

Sau đó nhập các biến và mixin trong Ứng dụng. scss như sau

 @import "./Styles/variables";
@import "./Styles/mixins"; 

Sử dụng các biến và mixin của bạn trong Ứng dụng. tập tin scss

 @import "./Styles/variables.scss";
@import "./Styles/mixins";
.wrapper {
  background-color: $background-color;
  color: $text-color;
  padding: $block-padding;

  &__btns {
    @include vertical-list;
    button {
      width: $btn-width;
      height: $btn-height;
    }
   }
} 

Đó là cách bạn sử dụng biến và mixin trong React. Bên cạnh mixin và biến, bạn cũng có thể sử dụng tất cả các tính năng tuyệt vời khác trong Sass, chẳng hạn như hàm. không có giới hạn

Sử dụng Sass trong React. js

Sass cung cấp nhiều chức năng hơn trên CSS, đây chính xác là những gì bạn cần để viết mã CSS có thể tái sử dụng

Bạn có thể bắt đầu sử dụng Sass trong React bằng cách cài đặt gói sass qua npm hoặc yarn, cập nhật các tệp CSS của bạn thành. scss hoặc. sass, sau đó cập nhật quá trình nhập của bạn để sử dụng phần mở rộng tệp mới. Sau đó, bạn có thể bắt đầu viết SCSS trong React

Tôi có thể sử dụng CSS trong phản ứng gốc không?

Tại sao tôi nên sử dụng SCSS thay vì CSS?

Sass có giống như SCSS không?

Tôi có nên sử dụng Sass với React không?