Nhập scss góc

Để tránh các sự cố biên dịch SCSS và ánh xạ đường dẫn tệp SCSS, hãy thêm stylePreprocessorOptions vào. góc-cli. tập tin json

Thêm tùy chọn

:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
1 ở hai vị trí bên dưới ứng dụng trong tệp
:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
2

  1. góc-cli. json -> {}bản dựng -> {}tùy chọn
  2. góc-cli. json -> {}kiểm tra -> {}tùy chọn

Các đường dẫn sau có thể được sử dụng trên toàn cầu trong ứng dụng Góc

"stylePreprocessorOptions": {
     "includePaths": [
     "node_modules/@syncfusion"
    ]
  },

Có thể tải xuống một mẫu góc với trình biên dịch SCSS để hiển thị thành phần Lưới JS 2 cần thiết từ liên kết GitHub sau

Cách ghi đè kiểu

Trong các thành phần Angular được đồng bộ hóa, bạn có thể ghi đè các kiểu điều khiển bằng cách thay thế các giá trị biến

:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
3 như bên dưới

// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';

Phiên bản góc-CLI 8 với SASS

Trong phiên bản 8, Nhóm góc cạnh đã chuyển từ

:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
4 sang
:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
3. Tuy nhiên, chúng tôi có tùy chọn sử dụng
:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
4 theo cách thủ công. Sử dụng lệnh bên dưới để cài đặt
:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
4

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);
}
8 sang
:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
9. Bằng cách chuyển sang cú pháp
// 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);
0, 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);
}
8 sang
:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(--primary);
color: var(--accent);
}
9 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 tìm hiểu kỹ 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);
}
9 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ọ

// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
0

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

// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
01 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

// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
02 của mình

// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
6

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

// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
7

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

// SASS Variable override
$accent: black;
$primary: rgb(0, 255, 157);

// syncfusion styles
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.scss';
04

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

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

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

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

Sử dụng SCSS (Biểu định kiểu cú pháp tuyệt vời) . Việc sử dụng các biến trong dự án góc dựa trên SCSS của bạn giúp bạn loại bỏ rất nhiều mã trùng lặp khỏi biểu định kiểu của mình .

Bạn có thể nhập trong SCSS không?

tệp scss. Bạn cũng có thể nhập tệp CSS . Chỉ thị @import nhập tệp và mọi biến hoặc mixin được xác định trong tệp đã nhập sau đó có thể được sử dụng trong tệp chính.

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

CSS là ngôn ngữ tạo kiểu cho phép người dùng tạo, thiết kế và tạo kiểu cho các trang web khác nhau. SCSS là một loại tệp đặc biệt trong chương trình SASS mà người ta cần viết bằng ngôn ngữ Ruby . Chúng tôi thường sử dụng CSS trong ngôn ngữ JavaScript và HTML. Chúng tôi thường sử dụng SCSS bằng ngôn ngữ Ruby.

Bạn sẽ sử dụng sass trong Angular như thế nào?

Trong CLI góc, tất cả các thành phần đều độc lập và các tệp Sass của chúng cũng vậy. Để sử dụng một biến từ trong tệp Sass của một thành phần, bạn cần phải nhập _variables. tệp scss . Một cách để làm điều này là @import với đường dẫn tương đối từ thành phần.