Cách nhập tệp scss trong phản ứng

Bạn đã bao giờ nghĩ về quản lý phong cách chưa? . Khi quá trình phát triển phát triển, các biểu định kiểu của nó tăng về kích thước và độ phức tạp, khiến chúng khó bảo trì hơn theo thời gian. Đó là nơi bộ xử lý trước CSS có ích

SASS/SCSS là gì?

SASS (Syntactally Awesome Stylesheet) / SCSS (Sassy Cascading Style Sheets) là các bộ tiền xử lý CSS bổ sung các tính năng đặc biệt như biến, trộn, bộ chọn lồng và bộ chọn kế thừa. Mặc dù các chức năng của chúng vẫn giữ nguyên, sự khác biệt chính giữa SASS và SCSS là cú pháp của chúng. Ví dụ: SASS không yêu cầu dấu ngoặc nhọn

Dưới đây là bốn lợi thế đáng kể

• Các biến -> để lưu trữ thông tin sẽ được sử dụng lại sau này
• Lồng nhau -> để cho phép bạn lồng các bộ chọn CSS theo cách giống như HTML
• Mixin -> để cho phép bạn tạo mã CSS có thể tái sử dụng
• Nội suy -> hàm mixin có thể truyền biểu thức

trình diễn

Hãy nhảy vào các mã. Bài viết này sẽ cung cấp các ví dụ về ba loại tiện ích mở rộng để chúng ta tìm hiểu sự khác biệt giữa SASS, SCSS và CSS. Hãy sử dụng ReactJs cho phần trình diễn của chúng tôi để làm cho nó đơn giản và dễ dàng

Mở thiết bị đầu cuối và hoàn thành các lệnh này để tạo một dự án phản ứng mới với SASS/SCSS đã sẵn sàng để sử dụng

• npx tạo-phản ứng-ứng dụng phản ứng-SASS
• cd phản ứng-sass
• npm cài đặt nút-sass -save
• bắt đầu npm

Trong ứng dụng. js

Xin lưu ý rằng bạn có thể sử dụng SASS hoặc SCSS. Trước tiên, hãy trình bày cách sử dụng SASS làm tiện ích mở rộng kiểu của chúng tôi

import './App.sass';

function App() {
  return (
    

      

        
Purple
      

      

        
Black
      
    
  );
}

export default App;

Hãy tạo tệp SASS của chúng tôi bằng cách tạo một tệp có tên Ứng dụng. ngổ ngáo

//variable example
$i-want-turquoise: turquoise
$i-want-black: black
$i-want-purple: purple

//mixin example
@mixin div-style
    width: 100%
    height: 100%
    align-items: center
    display: flex
    justify-content: center

@mixin p-style 
    padding: 20px  
    font-size: 60px  
    font-weight: bold
    text-align: center

//interpolation example
@mixin div-theme($name, $bg-color, $color) 
    #{$name} 
        background-color: #{$bg-color}
        color: #{$color}

//the line below is an example of how to call the interpolation method
@include div-theme(".black", $i-want-black, $i-want-purple)
@include div-theme(".purple", $i-want-purple, $i-want-black)

.App 
    display: flex
    height: 100vh

.purple
    //the line below is an example of how to call the existing mixin
    @include div-style
    p //this p tag is placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style

//the line below is an example of how to call the variables that stated earlier
.divider
    width: 5%
    background-color: $i-want-turquoise

.black
    //the line below is an example of how to call the existing mixin
    @include div-style
    p //this p tag is placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style

Đó là cách chúng tôi sử dụng SASS. Bây giờ, hãy xây dựng tiện ích mở rộng SCSS bằng cách tạo tệp có tên Ứng dụng. scss

//variable example
$i-want-turquoise: turquoise;
$i-want-black: black;
$i-want-purple: purple;

//mixin example
@mixin div-style{
    width: 100%;
    height: 100%;
    align-items: center;
    display: flex;
    justify-content: center;
}

@mixin p-style {
    padding: 20px;  
    font-size: 60px;  
    font-weight: bold;
    text-align: center;
}

//interpolation example
@mixin div-theme($name, $bg-color, $color) {
    #{$name} {
        background-color: #{$bg-color};
        color: #{$color};
    }
}

//the line below is an example of how to call the interpolation method
@include div-theme(".black", $i-want-black, $i-want-purple);
@include div-theme(".purple", $i-want-purple, $i-want-black);

.App {
    display: flex;
    height: 100vh;
}

.purple{
    //the line below is an example of how to call the existing mixin
    @include div-style;
    p{ //this p tag placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style;
    }
}

//the line below is an example of how to call the variables that stated earlier
.divider{
    width: 5%;
    background-color: $i-want-turquoise;
}

.black{
    //the line below is an example of how to call the existing mixin
    @include div-style;
    p{ //this p tag placed inside the called class, which represents the Nesting method
        //the line below is an example of how to call the existing mixin
        @include p-style;

    }
}

Giả sử bạn so sánh hai tệp tiền xử lý kiểu. Cú pháp khác nhau, nhưng chức năng của chúng vẫn giống nhau, tạo ra trang này

Để so sánh, nếu chúng ta sử dụng CSS làm biểu định kiểu của mình, mã bên dưới sẽ là kết quả, tạo ra nhiều bản sao của các thuộc tính có cùng giá trị

.black {
  background-color: black;
  color: purple; 
}

.purple {
  background-color: purple;
  color: black; 
}

.App {
  display: flex;
  height: 100vh; 
}

.purple {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center; 
}

.purple p {
  padding: 20px;
  font-size: 60px;
  font-weight: bold
  text-align: center; 
}

.divider {
  width: 5%;
  background-color: turquoise; 
}

.black {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  justify-content: center; 
}

.black p {
  padding: 20px;
  font-size: 60px;
  font-weight: bold;
  text-align: center; 
}

Sự kết luận

Sử dụng bộ xử lý trước kiểu SASS/SCSS, chúng ta có thể viết mã nhanh chóng đồng thời ngăn chặn việc sao chép các thuộc tính được gọi có cùng giá trị

Bài viết này đã đề cập đến các tính năng chính hoặc thiết yếu của việc sử dụng các biến, lồng, trộn và các tính năng nội suy. Có nhiều cách sử dụng cho SASS/SCSS. Để tìm hiểu thêm, hãy xem trang chính thức của họ tại đây https. // sass-lang. com/tài liệu

Chúng ta có thể sử dụng SCSS trong phản ứng không?

Bạn có thể nhập trong SCSS không?