Tôi có thể sử dụng scss trong dự án góc cạnh css không?

Kể từ Angular 13, thật dễ dàng để thay đổi hỗ trợ kiểu dáng từ. tệp chuẩn css sang hiện đại. tập tin scss. Nếu bạn cần biết thêm về các tệp sass/scss và những lợi ích mà chúng mang lại, hãy theo liên kết này. https. // sass-lang. com/ Bạn có thể nói chúng là những phong cách tuyệt vời về mặt cú pháp

ng add schematics-scss-migrate

Đoạn script trên sẽ khởi động lệnh Angular CLI để cập nhật css hoặc scss của bạn sang định dạng khác. Điều này hoạt động nếu bạn có scss và cũng muốn hạ cấp xuống css. Nếu bạn có một dự án mới, hãy chọn css làm điểm bắt đầu và scss đến. Tiếp theo, thêm một. scss vào dự án của bạn và các kiểu sẽ được xây dựng lại và chuyển vào các thành phần của bạn khi bạn sử dụng cú pháp sau

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}

Tiếp theo, tạo cái đó. scss cùng với thành phần của bạn và các kiểu đó sẽ được tích hợp trong thành phần đó. Angular có khái niệm về các kiểu đóng gói chế độ xem, giúp ngăn các kiểu rò rỉ bên ngoài thành phần vào phạm vi toàn cầu. Bạn có thể ghi đè tùy chọn đó và xem thêm về nó tại đây.

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);
}

1 sang

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

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

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

3, 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);
}

1 sang

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

2 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 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);
}

2 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ọ

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}

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

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}

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

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}

02 của mình

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}

6

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

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}

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

import { Component } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styleUrls: ["./home.styles.scss"],
})
export class HomeComponent {}

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ể có cả CSS và SCSS ở góc cạnh không?

Bạn có thể sử dụng SCSS với CSS không?

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