Di chuyển css sang góc scss

Bắt đầu với SCSS-Migrate

Một sơ đồ để di chuyển từ CSS sang định dạng biểu định kiểu SCSS (hoặc ngược lại) cho dự án Angular CLI

Cài đặt

// Angular Material styling is imported as ‘mat’.
@use '@angular/material' as mat;// ‘mat’ namespace is referenced.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

9

Hoặc sử dụng CLI

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

0

Lưu ý rằng lệnh

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

1 vẫn thêm gói vào devDependencies

Cách sử dụng

Trong dự án Angular CLI của bạn, hãy chạy

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

2

Điều này sẽ làm như sau trong dự án tiêu thụ

• Đổi tên tất cả các bảng định kiểu trong thư mục

  :root {
    --primary: pink;
    --accent: blue;
  }.share-button {
    background-color: var(--primary);
    color: var(--accent);
  }

  3 theo cách đệ quy
• Thay đổi

  :root {
    --primary: pink;
    --accent: blue;
  }.share-button {
    background-color: var(--primary);
    color: var(--accent);
  }

  4 trong các lớp thành phần tương ứng để trỏ đến tên tệp mới cho biểu định kiểu
• Cập nhật giá trị sơ đồ kiểu thành phần trong tệp

  :root {
    --primary: pink;
    --accent: blue;
  }.share-button {
    background-color: var(--primary);
    color: var(--accent);
  }

  5 hoặc tạo một giá trị nếu sơ đồ không tồn tại và
• Đổi tên tất cả các tham chiếu

  :root {
    --primary: pink;
    --accent: blue;
  }.share-button {
    background-color: var(--primary);
    color: var(--accent);
  }

  6 thành

  :root {
    --primary: pink;
    --accent: blue;
  }.share-button {
    background-color: var(--primary);
    color: var(--accent);
  }

  7 trong tệp

  :root {
    --primary: pink;
    --accent: blue;
  }.share-button {
    background-color: var(--primary);
    color: var(--accent);
  }

  5

ghi chú

Hãy thử trước với cờ

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

00

Trong bài đăng này, chúng ta sẽ xem xét các tính năng web mới ảnh hưởng đến cách chúng ta xác định kiểu dáng trong các ứng dụng Angular của mình

Sử dụng @use thay vì @import

Vào năm 2019, Sass đã giới thiệu một hệ thống mô-đun mới, bao gồm việc di chuyển từ

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

0 sang

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

1. Bằng cách chuyển sang cú pháp

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

2, chúng tôi có thể dễ dàng xác định CSS nào không được sử dụng và giảm kích thước của đầu ra CSS được biên dịch. Điều này làm cho không thể vô tình kéo theo các phụ thuộc bắc cầu. Mỗi mô-đun chỉ được bao gồm một lần cho dù các kiểu đó được tải bao nhiêu lần

Angular Material v12 bao gồm việc di chuyển từ cách sử dụng

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

0 sang

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

1 cho tất cả các lần nhập vào kiểu Angular Material Sass. Cấu trúc lại này của bề mặt API theo chủ đề của chúng tôi dễ hiểu và dễ đọc hơn, giúp các nhà phát triển tận dụng tốt hơn hệ thống mô-đun mới này. Quá trình di chuyển này diễn ra trong các tập lệnh có trong

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

1. Một ví dụ về sự thay đổi này là cách chúng tôi xác định chủ đề Vật liệu góc

// Angular Material styling is imported as ‘mat’.
@use '@angular/material' as mat;// ‘mat’ namespace is referenced.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

Bây giờ chúng tôi tận dụng việc giới thiệu các không gian tên để xác định

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

2 cốt lõi, sau đó truy cập các biến như

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

3. Nếu bạn đào sâu vào mã nguồn, chúng tôi sẽ cố ý hơn về những biến nào được

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

4-ed để truy cập công khai nhằm hướng dẫn người dùng hướng tới kiểu dáng gọn gàng hơn

Xem tài liệu về chủ đề Vật liệu góc mới được viết lại để xem cách

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

1 và quá trình di chuyển này đơn giản hóa việc tạo chủ đề cho các thành phần của bạn

Kích hoạt các khái niệm CSS hiện đại

Angular v13 đã xóa hỗ trợ cho IE11 sau khi yêu cầu nhận xét thành công - giúp Angular có thể áp dụng kiểu web hiện đại như CSS Grid, thuộc tính logic CSS, CSS

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

6,

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

7, v.v. Bạn có thể mong đợi thư viện Vật liệu góc bắt đầu sử dụng các tính năng này và chúng tôi cũng khuyến khích bạn

Nếu bạn tò mò về việc cải thiện các kỹ năng CSS hiện đại của mình, tôi khuyên bạn nên sử dụng web. khóa học Tìm hiểu CSS của nhà phát triển là một cách tuyệt vời để tìm hiểu hoặc nâng cao kiến ​​thức CSS của bạn

Bắt đầu sử dụng Biến CSS

Việc loại bỏ hỗ trợ IE11 mở đường cho một thứ mà tôi rất hào hứng — Biến CSS, còn được gọi là Thuộc tính tùy chỉnh CSS. Hãy coi đó là việc xác định một bề mặt API mà các nhà phát triển có thể sử dụng để tùy chỉnh các kiểu. Bạn có thể cung cấp một tập hợp các thuộc tính mở để hướng dẫn kích thước lề hoặc một loạt các biến màu và cho phép các nhà phát triển sử dụng và ghi đè chúng

Hãy tưởng tượng một thư viện bao gồm một nút chia sẻ với kiểu dáng tùy chỉnh

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

Sau đó, người dùng có thể triển khai kiểu dáng rõ ràng bằng cách sử dụng các biến CSS trong phạm vi mà thành phần thư viện này được sử dụng để gán lại màu chính và màu nhấn, đồng thời xem những thay đổi trực quan này được phản ánh trong cách sử dụng nút chia sẻ của họ

________số 8

Tương lai của các kiểu ghi đè

Các biến CSS mở ra cơ hội cho các API được hỗ trợ tốt để tùy chỉnh thành phần, cho phép các nhà phát triển tránh xa các phần ghi đè CSS và

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

8

Chúng tôi khuyên bạn nên giới thiệu các biến tùy chỉnh trong thư viện và phần phụ thuộc của mình để tạo bề mặt API để tùy chỉnh thư viện mà không cần

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

8. Việc triển khai các biến tùy chỉnh cho phép nhà phát triển có nhiều quyền kiểm soát hơn đối với kiểu dáng của họ và cung cấp một đường dẫn tránh các phần ghi đè CSS và

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

8

Các biến CSS trong Vật liệu góc

Chúng tôi đang khám phá các Biến CSS để mở ra bề mặt API của chủ đề Vật liệu và hỗ trợ cá nhân hóa nhiều hơn các Thành phần Vật liệu Góc như một phần của việc mở rộng sang các hệ thống của Thiết kế Vật liệu để tùy chỉnh

Quan tâm đến dự án này? . Vui lòng kết nối với nhóm của chúng tôi qua email

Angular CLI có thể giúp bạn tạo kiểu

Sass nội tuyến trong các thành phần

v12 đã giới thiệu tùy chọn sử dụng Sass nội tuyến trong các thành phần Góc của bạn. CLI hiện có tùy chọn cung cấp

:root {
  --primary: green;
  --accent: purple;
}

1 và biên dịch Sass trực tiếp từ các thành phần Angular của bạn thành kiểu dáng. Điều này hữu ích cho các nhà phát triển sử dụng các thành phần tệp đơn lẻ hoặc những người muốn thêm một lượng nhỏ kiểu dáng trong các tệp thành phần của họ

Để sử dụng Sass, bạn cần chỉ định ngôn ngữ trong cấu hình bản dựng

:root {
  --primary: green;
  --accent: purple;
}

2 của mình

// Angular Material styling is imported as ‘mat’.
@use '@angular/material' as mat;// ‘mat’ namespace is referenced.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

4

Bây giờ bạn có thể viết Sass trong @Components của mình

// Angular Material styling is imported as ‘mat’.
@use '@angular/material' as mat;// ‘mat’ namespace is referenced.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

5

Tailwind và PostCSS khác

Góc v11. 2 đã thêm hỗ trợ gốc để chạy TailwindCSS PostCSS với CLI góc

Để bật TailwindCSS, hãy chuyển từ

:root {
  --primary: pink;
  --accent: blue;
}.share-button {
  background-color: var(--primary);
  color: var(--accent);
}

1 sang v11. 2+ và sau đó

1. Cài đặt với

:root {
  --primary: green;
  --accent: purple;
}

4

2. Tạo tệp cấu hình TailwindCSS trong không gian làm việc hoặc thư mục gốc của dự án

// Angular Material styling is imported as ‘mat’.
@use '@angular/material' as mat;// ‘mat’ namespace is referenced.
$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

8

Nội tuyến CSS quan trọng

Angular v12 cũng đã giới thiệu nội tuyến CSS quan trọng để giúp đảm bảo các ứng dụng Angular cung cấp các chỉ số Core Web Vital tốt nhất có thể. Bạn có thể tìm hiểu thêm về nội tuyến tài nguyên trên kênh YouTube của chúng tôi. Đây là một ví dụ tuyệt vời về việc Angular đi đầu về hiệu suất web

Chúng tôi có thể chuyển đổi CSS sang SCSS ở dạng góc cạnh không?

Làm cách nào để thay đổi CSS thành SCSS?

Làm cách nào để thêm hỗ trợ SCSS trong góc?

Làm cách nào để thay đổi biểu định kiểu trong góc?