Sử dụng biến scss trong thành phần phản ứng

Trong SCSS, bạn có thể sử dụng các biến và công thức để thể hiện màu sắc, kích thước phông chữ, chiều rộng và các biến thể khoảng cách. Tuy nhiên, khi bạn chuyển từ SCSS sang các thành phần theo kiểu, cú pháp không còn hiệu lực nữa

Các tệp thành phần được tạo kiểu là CSS-in-JS, vì vậy chúng thực sự là các tệp JavaScript. Rõ ràng là bạn không thể viết CSS thuần túy trong tệp JS, vì vậy bạn cần điều chỉnh cú pháp

Trong bài viết này, chúng ta sẽ xem xét ba ví dụ về tái cấu trúc mã SCSS cho các thành phần được tạo kiểu

• Các biến để xác định màu sắc và kích thước
• Sử dụng phông chữ và hình ảnh
• Cú pháp tính toán và công thức

Thành phần SCSS so với cú pháp Thành phần được tạo kiểu

Trước tiên, hãy xem nhanh một thành phần được tạo kiểu bằng SCSS, so với một thành phần được tạo kiểu bằng CSS-in-JS

// SCSS button component, with BEM naming.button-primary {
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
}

Đây là thành phần nút tương tự, được tạo kiểu bằng CSS-in-JS

export const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
`

Nếu chúng tôi muốn có một số biến thể trong nút SCSS, giả sử một màu nền cho chủ đề sáng và một màu khác cho chủ đề tối, chúng tôi sẽ viết nó như thế này

// SCSS button component, with BEM naming.button {  &_primary {
    font-size: 1em;
    margin: 1em;
    padding: 0.25em 1em;
    border-radius: 3px;
  }  &--dark {
    background-color: #111;
  }  &--light {
    background-color: #F2F2F2;
  }
}

Vậy là component của chúng ta khi thêm vào file HTML sẽ như thế này

Button text

Nếu chúng tôi muốn nút này có một biến thể chỉ có đường viền và nền trong suốt, chúng tôi cần thêm một lớp khác, v.v.

Trong các thành phần được tạo kiểu, nút ở phía trên, với các biến thể tiềm năng, được viết như sau

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;
  background: ${props => props.light ? "#F2F2F" : "#111" };
  border: solid ${props => props.light ? "#111" : "#F2F2F2" };
`

Bây giờ chúng ta đã biết cú pháp thay đổi như thế nào, hãy xem cách chúng ta có thể cấu trúc lại các biến SCSS thành cú pháp thành phần theo kiểu

Viết màu và kích thước SCSS trong Thành phần theo kiểu

Đây là một ví dụ SCSS đầu tiên

Biến kích thước trong cú pháp SCSS

Trong các thành phần được tạo kiểu, cú pháp trở thành

Biến kích thước trong cú pháp Styled Components

Điều tương tự áp dụng cho màu sắc

Thể hiện các biến màu trong Thành phần được tạo kiểu so với. Cú pháp SCSSSử dụng phông chữ và hình ảnh trong SCSS so với Thành phần được tạo kiểu

Với phông chữ và hình ảnh, bạn có thể thực hiện những nội dung khá nâng cao trong Thành phần được tạo kiểu, nhưng tôi sẽ sử dụng hai ví dụ đơn giản ở đây, vì rất có thể bạn sẽ bắt đầu với quy mô nhỏ hơn nếu bạn chỉ đang học cách cấu trúc lại từ thư viện này sang thư viện khác

Vì vậy, trước tiên, đây là cách phông chữ được xử lý trong SCSS

Sử dụng họ phông chữ trong SCSS

Đối với hình ảnh, cú pháp SCSS trông như thế này

@mixin icon($name) {
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
    width: 10px;
    height: 10px;
  }
}

@include icon("mail");

Nếu bạn không muốn luôn nhập đường dẫn, bạn có thể xây dựng các hàm trợ giúp, như được giải thích trong bài viết này

Hàm trợ giúp nội dung đơn giản. Thủ thuật CSS

Đối phó với những con đường luôn hơi khó chịu, bạn sẽ thừa nhận. May mắn thay, thật dễ dàng với Sass để có một…

thủ thuật css. com

Trong các Thành phần được tạo kiểu, một cách rất dễ dàng để xử lý hình ảnh là chỉ cần nhập chúng vào tệp

import styled from 'styled-components';
import img from '../public/images/cat.png';

const Content = styled.div`
  background-image: url(${img});
  width: 120px;
  height: 120px;
`

Hoặc nếu bạn muốn chuyển hình ảnh làm chỗ dựa

const Container = styled.div`
    background-image: url(${props => props.img});
`;

Cú pháp tính toán và công thức

Trong SCSS, khi viết công thức tính độ rộng của thành phần cột chẳng hạn, bạn có thể sử dụng cú pháp này

________số 8_______

Trong Thành phần được tạo kiểu, mã này sẽ được cấu trúc lại thành

const widths = { 
  width50: `calc((50 / 100) * 960px - (2 * 20px))`
}export const Column50 = styled.div`
  margin: 0 auto;
  max-width: ${widths.width50};
`

Vậy là xong, tôi hy vọng điều này đã giúp bạn hiểu cách chuyển từ SCSS sang Styled Component khi sử dụng biến

Tôi có thể sử dụng SCSS trong Reactjs không?

SCSS kết nối với React như thế nào?

Tôi có thể sử dụng các biến CSS trong React không?

Bạn có thể tự động thay đổi giá trị biến SCSS không?