Các dự án góc đã được tạo kiểu bằng CSS tiêu chuẩn. Nếu bạn đang sử dụng CSS trong dự án góc cạnh của mình thì bạn thực sự không chỉ sử dụng bộ tiền xử lý CSS trong ứng dụng góc cạnh của mình. Một số trong những điều sau đây được bao gồm

• Chức năng tích hợp sẵn
• Biến
• Nesting/Bộ chọn cha mẹ
• hỗn hợp

… và nhiều cái khác. Sử dụng CSS trong dự án góc cạnh của bạn có nghĩa là mã của bạn ít phụ thuộc hơn. Khi bạn sử dụng CSS hoặc bất kỳ bộ tiền xử lý nào khác với mẫu thành phần Góc của bạn, các kiểu của bạn được gói gọn. Điều này là vô cùng mạnh mẽ. Thông thường, khi bạn viết mã CSS, các khai báo kiểu được áp dụng trên toàn ứng dụng theo kiểu xếp tầng

Sử dụng SCSS (Biểu định kiểu cú pháp tuyệt vời)

Ví dụ. Trong SCSS

      $height: 40px;

      $padding: 10px;

      $cursor: pointer;

      $minWidth: 100px;

body{

     height: $height;

     Padding: $padding;

     cursor: $cursor;

     min-width: $minWidth;

     font-style: oblique;

     text-align: center;
  }

Syntactally Awesome Stylesheet là siêu bộ CSS. Từ CSS, SCSS loại bỏ nhiều yêu cầu cú pháp, ví dụ:. khối và dấu chấm phẩy, đồng thời thêm vào rất nhiều tính năng mới để bạn sử dụng. Tạo biến là tính năng hữu ích nhất của SCSS. 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. Trong Sass, bạn khai báo một biến như thế này
Ví dụ

    $height: 40px;

    $padding: 10px;

Sass cũng cho phép bạn lồng các khai báo kiểu. Điều này làm cho mã kiểu dáng của bạn dễ đọc và có thể giảm hơn nữa mã kiểu dáng trùng lặp

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ừ @import sang @use. Bằng cách chuyển sang cú pháp @use, 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 @import sang @use 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 sử dụng việc giới thiệu các không gian tên để xác định cốt lõi

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

2, 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 sâu về 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

Kiểm tra tài liệu về chủ đề Vật liệu góc mới được viết lại để xem cách @use và việc 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à hơn thế nữa. 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ọ

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

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

{ "projects": {
    "architect": {
      "build": {
        "options": {
          "styles": [
            "src/styles.scss"
          ],
          "inlineStyleLanguage": "scss",
          ...

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

import { Component } from '@angular/core';@Component({
  selector: 'app-root,
  template: '
v12 has inline Sass!
',
  styles: [`
    $neon: #cf0;
    @mixin background ($color: #fff) {
      background: $color;
    }
    h1 {@include background($neon)}
  `]
}) export class AppComponent {}

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

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

1 đến 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

// tailwind.config.jsmodule.exports = {
  purge: [],
  darkMode: false, // or ‘media’ or ‘class’
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

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

Cái nào tốt hơn SASS hoặc SCSS hoặc ít hơn?

Tại sao SCSS phổ biến hơn SASS?

Tôi có nên sử dụng CSS hoặc SCSS trong góc cạnh không?

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