Hướng dẫn pass variable from ts to scss - chuyển biến từ ts sang scss

Một tùy chọn là các biến CSS.

Đây không phải là một biến SASS có sẵn trong tiền xử lý, mà là một cái gì đó có sẵn trong trình duyệt trong thời gian chạy. Do đó, bạn có thể nhận/đặt nó với JavaScript và kiểu CSS sẽ cập nhật dựa trên giá trị biến.

Chẳng hạn, giả sử thành phần của bạn cho phép bạn đặt màu văn bản thông qua biến JavaScript

element.style.setProperty("--text-color", textColor);

CSS:

p { color: var(--text-color); }

JS:

element.style.setProperty("--text-color", textColor);

Và nếu bạn muốn tính linh hoạt/khả năng duy trì của các biến trong SCSS của mình - bạn có thể có các biến trỏ đến các biến JS/CSS.

SCSS:

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

Đảm bảo xác minh rằng tính năng này có mức độ hỗ trợ trình duyệt của bạn.

Đôi khi bạn cần chia sẻ các biến giữa CSS (hoặc SCSS) và TypeScript, ví dụ, nếu bạn có danh sách các màu trong tệp SCSS của mình và cần kiểm tra tên biến trong TypeScript để chắc chắn là màu có sẵn.

Hãy tưởng tượng một thành phần Vue có một thuộc tính để đặt màu nền:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <div :class="['component', colorClass]">
    My component
  div>
template>
<script>
const availableColors = ['primary', 'alert', 'my-custom-color']

export default {
  name: 'my-component',
  props: {
    color: String
  },
  computed: {
    colorClass () { 
      if (availableColors.indexOf(this.color) !== -1) {
        return `color-${this.color}`
      } 
      return null
    }   
  }
}
script>

Trong thành phần này, nếu bạn đặt màu thuộc tính và giá trị có sẵn, hãy thêm một lớp cho màu đó, ví dụ, nếu màu prop là

element.style.setProperty("--text-color", textColor);

element.style.setProperty("--text-color", textColor);

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

Hãy nhớ rằng, có lẽ chúng ta có một tệp SCSS nơi chúng ta xác định rằng các lớp đó, một cái gì đó giống như:

1
2
3
4
5
6
7
8
9
10
11
12
13

$primary: #333;
$alert: #900;
$custom: #090;

.color-primary {
  background: $primary;
}
.color-alert {
  background: $alert;
}
.color-custom {
  background: $custom;
}

Chúng tôi có thể cải thiện tệp này để tạo chương trình lớp bằng cách sử dụng sức mạnh của SCSS:

1
2
3
4
5
6
7
8
9
10
11
12

Cách tạo ra các lớp màu này cho phép chúng ta đơn giản hóa cách chúng ta thêm một màu mới. Chúng ta chỉ nên thêm màu mới vào

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

1
2
3
4
5
6
7
8
9
10
11
12
13

$primary: #333;
$alert: #900;
$custom: #090;

.color-primary {
  background: $primary;
}
.color-alert {
  background: $alert;
}
.color-custom {
  background: $custom;
}

Chúng tôi có thể cải thiện tệp này để tạo chương trình lớp bằng cách sử dụng sức mạnh của SCSS:😔

1
2
3
4
5
6
7
8
9
10
11
12

________số 8
We will add an

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

element.style.setProperty("--text-color", textColor);

Nhưng nếu bạn nhớ trong thành phần của chúng tôi, chúng tôi có chiều rộng mảng, danh sách các màu có sẵn, nếu chúng tôi không thêm màu sắc mới vào thành phần, chúng tôi không thể sử dụng nó 😔

Nhưng có một cách để chỉ cần thêm màu sắc trong SCSS và cũng sử dụng danh sách trong TypeScript:

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<template>
  <div :class="['component', colorClass]">
    My component
  div>
template>
<script>
const availableColors = ['primary', 'alert', 'my-custom-color']

export default {
  name: 'my-component',
  props: {
    color: String
  },
  computed: {
    colorClass () { 
      if (availableColors.indexOf(this.color) !== -1) {
        return `color-${this.color}`
      } 
      return null
    }   
  }
}
script>

Trong thành phần này, nếu bạn đặt màu thuộc tính và giá trị có sẵn, hãy thêm một lớp cho màu đó, ví dụ, nếu màu prop là

element.style.setProperty("--text-color", textColor);

element.style.setProperty("--text-color", textColor);

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

// _vars.scss
$text-color: var(--text-color);

// _styles.scss
p { color: $text-color }

1
2
3
4
5
6
7
8
9
10
11
12
13

$primary: #333;
$alert: #900;
$custom: #090;

.color-primary {
  background: $primary;
}
.color-alert {
  background: $alert;
}
.color-custom {
  background: $custom;
}

Chúng ta có thể sử dụng biến TS trong SCSS không?

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

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

Làm thế nào để tôi xuất các biến trong SCSS?