Nhập góc scss

Nếu bạn đã từng làm việc trên một ứng dụng Angular lớn hơn một chút, thì có lẽ bạn đã biết rõ về vấn đề cần duyệt qua cấu trúc thư mục cho tệp mà bạn cần đưa vào TypeScript của mình. Nó thường trông như thế này

Trông không đẹp và cũng không hoạt động tốt với việc tái cấu trúc hoặc di chuyển mọi thứ xung quanh

Có thể còn khó chịu hơn khi nhập scss, vì đây là điều bạn có thể sẽ làm rất nhiều trong biểu định kiểu của các thành phần của mình. Và tệ hơn nữa, thường không có hỗ trợ nhập tự động trong IDE…

Nhập TypeScript

Đi vào tệ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);

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

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

Sự thay đổi sẽ trông như thế này. (hầu hết các mã không liên quan đã bị xóa cho ngắn gọn)

Bạn có thể đặt tên bí danh của mình theo bất cứ điều gì bạn thích, nhưng nếu bạn muốn có một số gợi ý

• bắt đầu tên bằng

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

  2 dường như là một thực tế phổ biến
• điều này cũng giúp hạn chế nguy cơ xung đột tên với một số thư viện npm mà bạn cũng có thể đang sử dụng trong cùng một dự án
• vì sự nguy hiểm này, một số người muốn làm cho các đường dẫn cụ thể hơn bằng cách thêm tiền tố vào tất cả chúng, e. g.

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

  3,

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

  4, v.v.

Tác dụng của nó là gì?

Điều này có vẻ không giống lắm, nhưng hãy nhớ rằng các lần nhập này hiện giữ nguyên trong toàn bộ cơ sở mã của bạn, cho dù bạn quyết định di chuyển tệp

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

Điều này sẽ hoạt động như thế nào với trình chỉnh sửa mã của bạn? . Và khi tôi quay lại các tệp TypeScript của mình, nó thậm chí còn gợi ý cho tôi rằng “Có thể rút ngắn quá trình nhập của tôi. ” Làm tốt lắm, IDEs

Nhập Sass/Less/Stylus

Nhân tiện, giải pháp TypeScript không dành riêng cho Angular - bạn cũng có thể sử dụng nó với các thiết lập khác của mình. Mặt khác, giải pháp Sass (hoặc bất kỳ bộ tiền xử lý nào được cli hỗ trợ) sẽ liên quan đến việc thêm cấu hình cho CLI góc. Nếu không có CLI, bạn vẫn có thể làm điều tương tự trực tiếp với webpack (bạn không thể làm gì với webpack?), nhưng chúng tôi sẽ không tập trung vào điều đó ngay bây giờ

Hãy truy cập vào

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

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

Và với sự thay đổi đơn giản đó, mã Sass của chúng ta bây giờ sẽ như thế này

Còn IDE thì sao? . WebStorm cần một số khuyến khích. nó được cập nhật khi tôi nhấp chuột phải vào thư mục “được bao gồm” (

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

Bạn có thể đã có một số ý tưởng về nơi bạn có thể sử dụng một số cấu hình này. Tuy nhiên, đây là một số tình huống thường được sử dụng

• Tôi thường nhóm các giao diện TypeScript của mình thành nhiều tệp mà tôi gọi là “mô hình. ” Như bạn có thể tưởng tượng, chúng là một trong những tệp được nhập nhiều nhất trong một ứng dụng, vì vậy chắc chắn rồi, tôi phải làm điều này rất nhiều.
  ______202
• Nếu bạn làm việc với Ngrx, bạn cũng có thể làm cho các hành động và bộ giảm tốc của mình dễ tiếp cận hơn.

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

  03, v.v.
• Đối với các phong cách của tôi, tôi thường giữ ít nhất các màu của mình trong một tệp riêng trong thư mục

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

  04. Với một chút cấu hình đó, tôi chỉ có thể

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

  05 từ bất kỳ đâu trong cấu trúc thư mục mà tôi đang ở

À chính nó đấy. Điều này có thể sẽ không làm đảo lộn cuộc sống của nhà phát triển của bạn, nhưng hy vọng nó sẽ mang lại trải nghiệm tốt hơn một chút khi làm việc hàng ngày với mã. Chúc may mắn

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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ọ

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

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

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

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

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

Để 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;
}

// 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ờ 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);

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. Cài đặt với

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

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

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

Làm cách nào để nhập tệp SCSS trong Angular?

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

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

Làm cách nào để sử dụng SCSS trong Angular 13?