Tôi có thể sử dụng các mô-đun css với scss không?

Sass vừa ra mắt một tính năng mới quan trọng mà bạn có thể nhận ra từ các ngôn ngữ khác. một hệ thống mô-đun. Đây là một bước tiến lớn cho

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8. một trong những tính năng Sass được sử dụng nhiều nhất. Mặc dù quy tắc
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8 hiện tại cho phép bạn lấy các gói của bên thứ ba và chia Sass của bạn thành “các phần” có thể quản lý được, nhưng nó có một số hạn chế

  • // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    8 cũng là một tính năng của CSS và sự khác biệt có thể gây nhầm lẫn
  • Nếu bạn
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    8 cùng một tệp nhiều lần, nó có thể làm chậm quá trình biên dịch, gây xung đột ghi đè và tạo đầu ra trùng lặp
  • Mọi thứ đều nằm trong không gian tên chung, bao gồm các gói của bên thứ ba – vì vậy, hàm
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    2 của tôi có thể ghi đè hàm
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    2 hiện tại của bạn hoặc ngược lại
  • Khi bạn sử dụng một chức năng như
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    2. không thể biết chính xác nơi nó được xác định. Nó đến từ
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    8 nào?

Các tác giả gói Sass (như tôi) đã cố gắng giải quyết các vấn đề về không gian tên bằng cách thêm tiền tố vào các biến và hàm của chúng tôi theo cách thủ công — nhưng các mô-đun Sass là một giải pháp mạnh mẽ hơn nhiều. Tóm lại,

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8 đang được thay thế bằng các quy tắc
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 và
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
8 rõ ràng hơn. Trong vài năm tới, Sass
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8 sẽ không được dùng nữa và sau đó sẽ bị xóa. Bạn vẫn có thể sử dụng nhập CSS, nhưng chúng sẽ không được biên dịch bởi Sass. Đừng lo, đã có công cụ di chuyển giúp bạn nâng cấp

Nhập tệp bằng @use

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
2

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 mới tương tự như
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8. nhưng có một số khác biệt đáng chú ý

  • Tệp chỉ được nhập một lần, bất kể bạn
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    7 nó bao nhiêu lần trong một dự án
  • Các biến, mixin và hàm (cái mà Sass gọi là "thành viên") bắt đầu bằng dấu gạch dưới (
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    63) hoặc dấu gạch nối (
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    64) được coi là riêng tư và không được nhập
  • Các thành viên từ tệp đã sử dụng (
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    65 trong trường hợp này) chỉ được cung cấp cục bộ, nhưng không được chuyển sang các lần nhập trong tương lai
  • Tương tự,
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    66 sẽ chỉ áp dụng lên chuỗi;
  • Tất cả các thành viên đã nhập được đặt tên theo mặc định

Khi chúng tôi

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 một tệp, Sass sẽ tự động tạo một không gian tên dựa trên tên tệp

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
1

Bây giờ chúng tôi có quyền truy cập vào các thành viên từ cả

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
65 và
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
69 — nhưng quyền truy cập đó không được chuyển giữa các lần nhập.
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
69 vẫn không có quyền truy cập vào các biến được xác định trong
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
65. Vì các tính năng đã nhập được đặt tên, chúng tôi phải sử dụng cú pháp phân chia theo thời gian mới để truy cập chúng

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();

Chúng tôi có thể thay đổi hoặc xóa không gian tên mặc định bằng cách thêm

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
72 vào phần nhập

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace

Việc sử dụng

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
73 sẽ thêm một mô-đun vào không gian tên gốc, vì vậy không cần tiền tố, nhưng những thành viên đó vẫn nằm trong phạm vi cục bộ của tài liệu hiện tại

Nhập các mô-đun Sass tích hợp

Các tính năng Sass nội bộ cũng đã chuyển sang hệ thống mô-đun, vì vậy chúng tôi có toàn quyền kiểm soát không gian tên chung. Có một số mô-đun tích hợp —

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
74,
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
75,
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
76,
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
77,
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
78,
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
79 và
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
60 — phải được nhập rõ ràng vào một tệp trước khi chúng được sử dụng

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
6

Các mô-đun Sass cũng có thể được nhập vào không gian tên chung

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
7

Các hàm bên trong đã có tên tiền tố, như

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
61 hoặc
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
62. có thể được sử dụng mà không cần sao chép tiền tố đó

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
6

Bạn có thể tìm thấy danh sách đầy đủ các mô-đun tích hợp, chức năng và thay đổi tên trong đặc tả mô-đun Sass

Các tính năng cốt lõi mới và thay đổi

Là một lợi ích phụ, điều này có nghĩa là Sass có thể thêm các chức năng và mixin nội bộ mới một cách an toàn mà không gây ra xung đột tên. Ví dụ thú vị nhất trong bản phát hành này là một mixin

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
63 có tên là
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
64. Điều này hoạt động tương tự như
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 nhưng nó chỉ trả về đầu ra CSS được tạo và nó có thể được sử dụng linh hoạt ở bất kỳ đâu trong mã của chúng tôi

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
5

Đối số đầu tiên là một URL mô-đun (như

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7) nhưng nó có thể được thay đổi linh hoạt bởi các biến và thậm chí bao gồm nội suy, như
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
67. Đối số thứ hai (tùy chọn) chấp nhận bản đồ các giá trị cấu hình

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
8

Đối số

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
68 chấp nhận các khóa và giá trị cấu hình cho bất kỳ biến nào trong mô-đun đã tải, nếu đó là cả hai

  • Một biến toàn cầu không bắt đầu bằng
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    63 hoặc
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    64 (hiện được sử dụng để biểu thị quyền riêng tư)
  • Được đánh dấu là giá trị
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    51, sẽ được định cấu hình
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
3

Lưu ý rằng khóa

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
52 sẽ đặt biến
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
53

Có thêm hai hàm

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
63 mới.
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
55 và
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
56. Mỗi cái trả về một bản đồ tên và giá trị thành viên từ một mô-đun đã được nhập. Chúng chấp nhận một đối số khớp với không gian tên mô-đun

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
10

Một số hàm

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
63 khác —
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
58,
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
59,
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
80 và
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
81 — sẽ nhận thêm các đối số
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
82, cho phép chúng tôi kiểm tra rõ ràng từng không gian tên

Điều chỉnh và chia tỷ lệ màu sắc

Mô-đun

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
83 cũng có một số cảnh báo thú vị khi chúng tôi cố gắng loại bỏ một số vấn đề cũ. Nhiều phím tắt kế thừa như
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
84. hoặc
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
85 hiện không được dùng nữa để thay thế cho các chức năng
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
86 và
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
87 rõ ràng

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
11

Một số chức năng cũ đó (như

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
88) là dư thừa và không cần thiết. Những người khác - như
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
89.
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
30.
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
31. v.v. - cần được xây dựng lại với logic bên trong tốt hơn. Các chức năng ban đầu được dựa trên
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
32. trong đó sử dụng toán học tuyến tính. thêm
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
33 vào độ sáng hiện tại của
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
34 trong ví dụ của chúng tôi ở trên. Trong hầu hết các trường hợp, chúng tôi thực sự muốn tăng 535 độ sáng theo phần trăm, so với giá trị hiện tại

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
12

Sau khi hoàn toàn không được dùng nữa và bị xóa, các chức năng phím tắt này cuối cùng sẽ xuất hiện lại trong

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
83 với hành vi mới dựa trên
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
87 thay vì
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
86. Điều này đang diễn ra theo từng giai đoạn để tránh những thay đổi đột ngột gây ảnh hưởng ngược. Trong thời gian chờ đợi, tôi khuyên bạn nên kiểm tra mã của mình theo cách thủ công để xem nơi nào
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
87 có thể hoạt động tốt hơn cho bạn

Định cấu hình thư viện đã nhập

Các thư viện của bên thứ ba hoặc có thể sử dụng lại thường sẽ đi kèm với các biến cấu hình chung mặc định để bạn ghi đè. Chúng tôi đã từng làm điều đó với các biến trước khi nhập

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
13

Vì các mô-đun đã sử dụng không còn quyền truy cập vào các biến cục bộ, nên chúng tôi cần một cách mới để đặt các giá trị mặc định đó. Chúng tôi có thể làm điều đó bằng cách thêm bản đồ cấu hình vào

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
14

Điều này tương tự như đối số

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
68 trong
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
64. nhưng thay vì sử dụng tên biến làm khóa, chúng tôi sử dụng chính biến đó, bắt đầu bằng
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
103

Tôi thích cách điều này tạo nên cấu hình rõ ràng, nhưng có một quy tắc đã khiến tôi vấp ngã nhiều lần. một mô-đun chỉ có thể được cấu hình một lần, lần đầu tiên nó được sử dụng. Đơn hàng nhập khẩu luôn quan trọng đối với Sass, ngay cả với

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8. nhưng những vấn đề đó luôn âm thầm thất bại. Bây giờ chúng tôi nhận được một lỗi rõ ràng, điều này vừa tốt vừa đôi khi gây ngạc nhiên. Trước tiên, hãy đảm bảo
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 và định cấu hình thư viện trong bất kỳ tệp "điểm vào" nào (tài liệu trung tâm nhập tất cả các phần), để các cấu hình đó biên dịch trước
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 khác của thư viện

(Hiện tại) không thể "xâu chuỗi" các cấu hình lại với nhau trong khi vẫn giữ cho chúng có thể chỉnh sửa được, nhưng bạn có thể bọc một mô-đun đã định cấu hình cùng với các tiện ích mở rộng và chuyển mô-đun đó thành một mô-đun mới

Truyền tệp với @forward

Chúng tôi không phải lúc nào cũng cần sử dụng tệp và truy cập các thành viên của nó. Đôi khi chúng tôi chỉ muốn chuyển nó cho các lần nhập trong tương lai. Giả sử chúng ta có nhiều phần liên quan đến biểu mẫu và chúng ta muốn nhập tất cả chúng lại với nhau dưới dạng một không gian tên. Chúng ta có thể làm điều đó với

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
8

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
15

Các thành viên của tệp được chuyển tiếp không có sẵn trong tài liệu hiện tại và không có không gian tên nào được tạo, nhưng các biến, hàm và mixin đó sẽ có sẵn khi một tệp khác muốn

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 hoặc
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
8 toàn bộ bộ sưu tập. Nếu các phần được chuyển tiếp chứa CSS thực, thì phần đó cũng sẽ được chuyển mà không tạo đầu ra cho đến khi gói được sử dụng. Tại thời điểm đó, tất cả sẽ được coi là một mô-đun duy nhất với một không gian tên duy nhất

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
16

Ghi chú. nếu bạn yêu cầu Sass nhập một thư mục, nó sẽ tìm một tệp có tên

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
110 hoặc
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
111)

Theo mặc định, tất cả các thành viên công cộng sẽ chuyển tiếp với một mô-đun. Nhưng chúng ta có thể chọn lọc hơn bằng cách thêm các mệnh đề

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
112 hoặc
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
113 và nêu tên các thành viên cụ thể để bao gồm hoặc loại trừ

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
17

Ghi chú. khi các chức năng và mixin chia sẻ một tên, chúng được hiển thị và ẩn cùng nhau

Để làm rõ nguồn hoặc tránh xung đột đặt tên giữa các mô-đun được chuyển tiếp, chúng tôi có thể sử dụng

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
114 để thêm tiền tố cho các thành viên của một phần khi chúng tôi chuyển tiếp

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
18

Và, nếu cần, chúng ta luôn có thể

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 và
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
8 cùng một mô-đun bằng cách thêm cả hai quy tắc

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
19

Điều đó đặc biệt hữu ích nếu bạn muốn bọc một thư viện bằng cấu hình hoặc bất kỳ công cụ bổ sung nào, trước khi chuyển nó sang các tệp khác của bạn. Nó thậm chí có thể giúp đơn giản hóa đường dẫn nhập

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
0

Cả

@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
7 và
@use 'buttons' as *; // the star removes any namespace
@use 'forms' as f;

$btn-color: $color; // buttons.$color without a namespace
$form-border: f.$input-border; // forms.$input-border with a custom namespace
8 phải được khai báo ở thư mục gốc của tài liệu (không được lồng vào nhau) và ở đầu tệp. Chỉ
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
119 và các định nghĩa biến đơn giản mới có thể xuất hiện trước các lệnh nhập

Di chuyển đến các mô-đun

Để kiểm tra cú pháp mới, tôi đã xây dựng một thư viện Sass mã nguồn mở mới (Hệ thống màu xếp tầng) và một trang web mới cho ban nhạc của tôi — cả hai vẫn đang được xây dựng. Tôi muốn hiểu các mô-đun với tư cách vừa là thư viện vừa là tác giả trang web. Hãy bắt đầu với trải nghiệm “người dùng cuối” về cách viết kiểu trang web bằng cú pháp mô-đun…

Duy trì và viết phong cách

Sử dụng các mô-đun trên trang web là một niềm vui. Cú pháp mới khuyến khích một kiến ​​trúc mã mà tôi đã sử dụng. Tất cả cấu hình toàn cầu và công cụ nhập của tôi trực tiếp trong một thư mục (tôi gọi nó là

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
120), với một tệp chỉ mục chuyển tiếp mọi thứ tôi cần

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
1

Khi tôi xây dựng các khía cạnh khác của trang web, tôi có thể nhập các công cụ và cấu hình đó vào bất cứ nơi nào tôi cần

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
2

Điều này thậm chí còn hoạt động với các thư viện Sass hiện có của tôi, như Accoutrement và Herman, vẫn sử dụng cú pháp

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8 cũ. Vì quy tắc
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8 sẽ không được thay thế ở mọi nơi trong một sớm một chiều, Sass đã xây dựng trong giai đoạn chuyển tiếp. Các mô-đun hiện có sẵn, nhưng
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
8 sẽ không bị phản đối trong một hoặc hai năm nữa — và chỉ bị xóa khỏi ngôn ngữ một năm sau đó. Trong khi đó, hai hệ thống sẽ hoạt động cùng nhau theo một trong hai hướng

  • Nếu chúng tôi
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    8 một tệp chứa cú pháp
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    7/
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    8 mới, thì chỉ các thành viên công khai được nhập, không có không gian tên
  • Nếu chúng tôi
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    7 hoặc
    @use 'buttons' as *; // the star removes any namespace
    @use 'forms' as f;
    
    $btn-color: $color; // buttons.$color without a namespace
    $form-border: f.$input-border; // forms.$input-border with a custom namespace
    8 một tệp chứa cú pháp kế thừa
    // variables: .$variable
    $btn-color: buttons.$color;
    $form-border: forms.$input-border;
    
    // functions: .function()
    $btn-background: buttons.background();
    $form-border: forms.border();
    
    // mixins: @include .mixin()
    @include buttons.submit();
    @include forms.input();
    8, thì chúng tôi có quyền truy cập vào tất cả các lần nhập lồng nhau dưới dạng một không gian tên duy nhất

Điều đó có nghĩa là bạn có thể bắt đầu sử dụng cú pháp mô-đun mới ngay lập tức mà không cần đợi bản phát hành mới của các thư viện yêu thích của mình. và tôi có thể dành chút thời gian để cập nhật tất cả các thư viện của mình

công cụ di chuyển

Việc nâng cấp sẽ không mất nhiều thời gian nếu chúng ta sử dụng Công cụ di chuyển do Jennifer Thakar xây dựng. Nó có thể được cài đặt với Node, Chocolatey hoặc Homebrew

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
3

Đây không phải là công cụ dùng một lần để di chuyển sang các mô-đun. Giờ đây, Sass đã hoạt động trở lại trong quá trình phát triển (xem bên dưới), công cụ di chuyển cũng sẽ nhận được các bản cập nhật thường xuyên để giúp di chuyển từng tính năng mới. Bạn nên cài đặt cái này trên toàn cầu và giữ nó xung quanh để sử dụng trong tương lai

Trình di chuyển có thể được chạy từ dòng lệnh và hy vọng cũng sẽ được thêm vào các ứng dụng của bên thứ ba như CodeKit và Scout. Trỏ nó vào một tệp Sass duy nhất, chẳng hạn như

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
130. và cho nó biết (những) di chuyển nào sẽ được áp dụng. Tại thời điểm này, chỉ có một lần di chuyển được gọi là
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
131

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
4

Theo mặc định, trình di chuyển sẽ chỉ cập nhật một tệp duy nhất, nhưng trong hầu hết các trường hợp, chúng tôi sẽ muốn cập nhật tệp chính và tất cả các tệp phụ thuộc của nó. bất kỳ phần nào được nhập, chuyển tiếp hoặc sử dụng. Chúng tôi có thể làm điều đó bằng cách đề cập đến từng tệp riêng lẻ hoặc bằng cách thêm cờ

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
132

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
5

Để chạy thử, chúng tôi có thể thêm

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
133 (hoặc viết tắt là
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
134) và xem kết quả mà không thay đổi bất kỳ tệp nào. Có một số tùy chọn khác mà chúng ta có thể sử dụng để tùy chỉnh quá trình di chuyển — thậm chí một tùy chọn cụ thể để giúp các tác giả thư viện xóa các không gian tên thủ công cũ — nhưng tôi sẽ không đề cập đến tất cả chúng ở đây. Công cụ di chuyển được ghi lại đầy đủ trên trang web Sass

Cập nhật các thư viện đã xuất bản

Tôi gặp phải một số vấn đề về phía thư viện, cụ thể là cố gắng cung cấp cấu hình người dùng trên nhiều tệp và xử lý các cấu hình chuỗi bị thiếu. Các lỗi đặt hàng có thể khó gỡ lỗi, nhưng kết quả rất đáng để nỗ lực và tôi nghĩ chúng ta sẽ sớm thấy một số bản vá bổ sung sắp ra mắt. Tôi vẫn phải thử nghiệm công cụ di chuyển trên các gói phức tạp và có thể viết một bài tiếp theo cho các tác giả thư viện

Điều quan trọng cần biết ngay bây giờ là Sass đã bảo vệ chúng tôi trong giai đoạn chuyển tiếp. Các mô-đun và tính năng nhập không chỉ có thể hoạt động cùng nhau mà chúng tôi còn có thể tạo các tệp "chỉ nhập" để cung cấp trải nghiệm tốt hơn cho người dùng cũ vẫn đang truy cập thư viện của chúng tôi. Trong hầu hết các trường hợp, đây sẽ là phiên bản thay thế của tệp gói chính và bạn sẽ muốn chúng cạnh nhau.

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
136 cho người dùng mô-đun và
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
137 cho người dùng cũ. Bất cứ khi nào người dùng gọi
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
138, nó sẽ tải phiên bản
// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
139 của tệp

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
6

Điều này đặc biệt hữu ích để thêm tiền tố cho người dùng không theo mô-đun

// variables: .$variable
$btn-color: buttons.$color;
$form-border: forms.$input-border;

// functions: .function()
$btn-background: buttons.background();
$form-border: forms.border();

// mixins: @include .mixin()
@include buttons.submit();
@include forms.input();
7

Nâng cấp Sass

Bạn có thể nhớ rằng Sass đã đóng băng tính năng vài năm trước, để bắt kịp nhiều cách triển khai khác nhau (LibSass, Node Sass, Dart Sass) và cuối cùng đã ngừng triển khai Ruby ban đầu. Việc đóng băng đó đã kết thúc vào năm ngoái, với một số tính năng mới cũng như các cuộc thảo luận và phát triển tích cực trên GitHub – nhưng không có nhiều sự phô trương. Nếu bạn bỏ lỡ những bản phát hành đó, bạn có thể cập nhật trên Sass Blog

  • Nhập CSS và Khả năng tương thích CSS (Dart Sass v1. 11)
  • Đối số nội dung và hàm màu (Dart Sass v1. 15)

Dart Sass hiện là triển khai chính tắc và nói chung sẽ là người đầu tiên triển khai các tính năng mới. Nếu bạn muốn bản mới nhất, tôi khuyên bạn nên chuyển đổi. Bạn có thể cài đặt Dart Sass với Node, Chocolatey hoặc Homebrew. Nó cũng hoạt động tốt với các bước xây dựng gulp-sass hiện có

Giống như CSS (kể từ CSS3), không còn một số phiên bản thống nhất duy nhất cho các bản phát hành mới. Tất cả các triển khai Sass đang hoạt động từ cùng một đặc điểm kỹ thuật, nhưng mỗi triển khai có một lịch phát hành và đánh số duy nhất, được phản ánh cùng với thông tin hỗ trợ trong tài liệu mới tuyệt đẹp do Jina thiết kế

Bạn có thể trộn SCSS và CSS không?

Chúng tôi có thể dễ dàng nhập các tệp CSS trong tệp sass . Nhưng nó bị cấm không bao gồm. phần mở rộng css trong câu lệnh nhập.

SCSS CSS có hợp lệ không?

SCSS. Cú pháp SCSS sử dụng phần mở rộng tệp. scss. Với một vài ngoại lệ nhỏ, nó là một siêu bộ CSS, có nghĩa là về cơ bản tất cả CSS hợp lệ cũng là SCSS hợp lệ .

Bạn có thể sử dụng giao diện người dùng vật chất với SCSS không?

Nếu bạn muốn sử dụng lớp CSS/SCSS trong thành phần MUI, bạn nên nhập tệp trực tiếp vào thành phần Bảng . Tuy nhiên, sẽ không tốt khi sử dụng SCSS với thành phần MUI, bạn nên sử dụng makeStyles hoặc withStyles để tạo kiểu cho thành phần MUI.