Chuyển tiếp SCSS

Sass là ngôn ngữ biểu định kiểu, là bộ tiền xử lý cho CSS (Cascading Style Sheets). Nó bổ sung các tính năng cho CSS như biến, quy tắc lồng nhau và mixin, có thể làm cho biểu định kiểu của bạn dễ bảo trì hơn và dễ viết hơn

@use so với @forward

Trong Sass, bạn có thể sử dụng chỉ thị @use để nhập một mô-đun và các kiểu, biến và mixin liên quan của nó vào biểu định kiểu của bạn

Chỉ thị @use cho phép bạn mô đun hóa biểu định kiểu của mình và giúp chúng dễ bảo trì hơn bằng cách chia nhỏ chúng thành các phần nhỏ hơn, có thể tái sử dụng

Mặt khác, chỉ thị

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

1 cho phép bạn chuyển tiếp một khai báo hoặc tập hợp các khai báo sang một mô-đun khác, thay vì nhập toàn bộ mô-đun

Điều này có thể hữu ích nếu bạn chỉ cần sử dụng một phần nhỏ của mô-đun hoặc nếu bạn muốn tùy chỉnh các kiểu trong mô-đun bằng cách thêm hoặc ghi đè một số khai báo

Đây là một ví dụ về cách bạn có thể sử dụng các chỉ thị @use và

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

1 trong Sass

// Define a module with some variables and mixins
@use 'variables' as *;

@mixin font-size($size) {
  font-size: $size;
}

// Import the module and use its variables and mixins
@use 'typography';

h1 {
  @include font-size(48px);
}

// Forward a declaration to another module
@forward 'button';

button {
  @extend .button;
}

@use vs @import

Trong Sass, bạn có thể sử dụng các chỉ thị @use và

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong biểu định kiểu của bạn

Tuy nhiên, có một số điểm khác biệt chính giữa các chỉ thị này

• Chỉ thị @use là một tính năng mới hơn đã được giới thiệu trong Sass 3. 7. Nó cho phép bạn nhập một mô-đun và các kiểu, biến và mixin liên quan của nó vào biểu định kiểu của bạn. Bạn có thể sử dụng từ khóa

  sass/
  ├── modules/
  │   ├── _variables.scss
  │   ├── _typography.scss
  │   └── _button.scss
  └── main.scss

  7 để chỉ định bí danh cho mô-đun đã nhập, có thể được sử dụng để truy cập các khai báo của nó
• Chỉ thị

  sass/
  ├── modules/
  │   ├── _variables.scss
  │   ├── _typography.scss
  │   └── _button.scss
  └── main.scss

  5 là cách truyền thống để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong Sass. Nó hoạt động tương tự như chỉ thị @use, nhưng không hỗ trợ từ khóa

  sass/
  ├── modules/
  │   ├── _variables.scss
  │   ├── _typography.scss
  │   └── _button.scss
  └── main.scss

  7 và không cho phép bạn nhập các khai báo cụ thể

Nói chung, chỉ thị @use là một cách mạnh mẽ và linh hoạt hơn để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong Sass

Nó cho phép bạn nhập các khai báo cụ thể và chỉ định bí danh cho mô-đun đã nhập, điều này có thể làm cho biểu định kiểu của bạn dễ bảo trì hơn và dễ đọc hơn

Mặt khác, chỉ thị

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 là một cách đơn giản và quen thuộc hơn để bao gồm các kiểu, biến và mixin từ các tệp hoặc mô-đun khác trong Sass

Nó có thể là một lựa chọn tốt nếu bạn đang làm việc trong một dự án không yêu cầu các tính năng nâng cao của chỉ thị @use

@use vs @forward vs @import trong Ví dụ về cấu trúc thư mục

Dưới đây là một ví dụ về cách bạn có thể sắp xếp các tệp Sass của mình và sử dụng các chỉ thị @use,

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

1 và

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 để mô đun hóa và sắp xếp các biểu định kiểu của bạn

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

Tệp

$primary-color: #333;
$secondary-color: #777;

@mixin font-size($size) {
  font-size: $size;
}

@mixin font-color($color) {
  color: $color;
}

7 có thể xác định một số biến toàn cục và mixin mà bạn muốn sử dụng xuyên suốt biểu định kiểu của mình

$primary-color: #333;
$secondary-color: #777;

@mixin font-size($size) {
  font-size: $size;
}

@mixin font-color($color) {
  color: $color;
}

Tệp

$primary-color: #333;
$secondary-color: #777;

@mixin font-size($size) {
  font-size: $size;
}

@mixin font-color($color) {
  color: $color;
}

8 có thể sử dụng các biến và mixin được xác định trong tệp

$primary-color: #333;
$secondary-color: #777;

@mixin font-size($size) {
  font-size: $size;
}

@mixin font-color($color) {
  color: $color;
}

7 để xác định một số kiểu và mixin cho văn bản kiểu dáng

@use 'variables' as *;

h1 {
  @include font-size(48px);
  @include font-color($primary-color);
}

h2 {
  @include font-size(36px);
  @include font-color($secondary-color);
}

Tệp

@use 'variables' as *;

h1 {
  @include font-size(48px);
  @include font-color($primary-color);
}

h2 {
  @include font-size(36px);
  @include font-color($secondary-color);
}

0 có thể xác định một số kiểu và mixin cho các nút tạo kiểu

.button {
  background-color: $primary-color;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 16px;
}

Trong biểu định kiểu chính, bạn có thể sử dụng chỉ thị @use để nhập các tệp

$primary-color: #333;
$secondary-color: #777;

@mixin font-size($size) {
  font-size: $size;
}

@mixin font-color($color) {
  color: $color;
}

7 và

$primary-color: #333;
$secondary-color: #777;

@mixin font-size($size) {
  font-size: $size;
}

@mixin font-color($color) {
  color: $color;
}

8 và sử dụng các khai báo của chúng

@use 'variables';
@use 'typography';

body {
  background-color: $primary-color;
}

p {
  @include font-size(16px);
}

Bạn cũng có thể sử dụng chỉ thị

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

1 để chuyển tiếp một tờ khai tới tệp

@use 'variables' as *;

h1 {
  @include font-size(48px);
  @include font-color($primary-color);
}

h2 {
  @include font-size(36px);
  @include font-color($secondary-color);
}

0

@forward 'button';

button {
  @extend .button;
}

Tôi hy vọng ví dụ này giúp làm rõ cách bạn có thể sử dụng các chỉ thị @use,

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

1 và

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 để mô đun hóa và sắp xếp các tệp Sass và biểu định kiểu của bạn. Hãy cho tôi biết nếu bạn có bất kì câu hỏi nào khác

@import có bị phản đối không?

Không, quy tắc

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 không bị phản đối trong CSS (Cascading Style Sheets). Đây là một tính năng tiêu chuẩn của CSS cho phép bạn đưa các kiểu từ các biểu định kiểu khác vào tài liệu của mình

Quy tắc

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 có cú pháp như sau

@import url|string|format;

Tham số

.button {
  background-color: $primary-color;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 16px;
}

1 chỉ định vị trí của biểu định kiểu sẽ được nhập và có thể là một URL hoặc một đường dẫn tương đối

Tham số

.button {
  background-color: $primary-color;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 16px;
}

2 chỉ định nội dung của biểu định kiểu sẽ được nhập và tham số

.button {
  background-color: $primary-color;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 16px;
}

3 chỉ định định dạng của biểu định kiểu

Đây là một ví dụ về cách bạn có thể sử dụng quy tắc

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 trong CSS

@import url('styles.css');
@import url('print.css') print;
@import 'custom.css';

Trong ví dụ này, quy tắc

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 đầu tiên nhập tệp

.button {
  background-color: $primary-color;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 16px;
}

6, quy tắc

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 thứ hai nhập tệp

.button {
  background-color: $primary-color;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  padding: 8px 16px;
}

8 và chỉ áp dụng tệp đó cho phương tiện in, còn quy tắc

sass/
├── modules/
│   ├── _variables.scss
│   ├── _typography.scss
│   └── _button.scss
└── main.scss

5 thứ ba nhập nội dung của tệp

@use 'variables';
@use 'typography';

body {
  background-color: $primary-color;
}

p {
  @include font-size(16px);
}

0

Chuyển tiếp trong SCSS là gì?

Sự khác biệt giữa @import và @forward trong Sass là gì?

SCSS dùng để làm gì?

Sự khác biệt giữa SCSS và Sass là gì?