Cách sử dụng các biến scss trong thành phần 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

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

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

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

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

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

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

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

// 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 Angular đã chuyển từ

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

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

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

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

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

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

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

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

Nếu bạn đã làm việc với một công cụ như SASS, có lẽ bạn đã từng có một tệp chung với tất cả các biến của mình, chẳng hạn như màu sắc, phông chữ, v.v.

Ví dụ

$main-color: green;
$second-color: yellow;

Sự khác biệt bây giờ khi làm việc với angular-cli và webpack là bạn không có quyền truy cập vào các biến theo cách toàn cầu

Hãy tạo

$main-color: green;
$second-color: yellow;

$main-color: green;
$second-color: yellow;

$header-color: green;

Bây giờ, hãy thử sử dụng

$main-color: green;
$second-color: yellow;

// todo.component.scssh1 {
  color: $header-color;
}

Tại thời điểm này, bạn sẽ nhận được lỗi này

Trong hướng dẫn Binding CSS Styles to Events in Angular Applications, chúng ta đã học cách đặt các biến vanilla CSS bằng phương thức setProperty(). Bạn có thể coi bài viết hôm nay như một phần đồng hành ở chỗ nó sẽ đề cập đến cách đọc các biến và sử dụng chúng trong các ứng dụng Angular của bạn. Để làm điều đó, chúng tôi sẽ sửa đổi ứng dụng demo mà chúng tôi đã tạo trong hướng dẫn đó để tìm nạp các màu chủ đề được xác định trong Sass. tập tin scss

Tại sao sử dụng biến Sass?

Sass cung cấp nhiều mô-đun tích hợp cung cấp các chức năng hữu ích. Chẳng hạn, mô-đun màu sắc chứa nhiều chức năng hữu ích cho cả việc phân tích và sửa đổi màu sắc. Chúng bao gồm các hàm làm sáng () và làm tối () lấy một màu và thay đổi nó theo tỷ lệ phần trăm. Chúng đặc biệt hữu ích để điều chỉnh nhiều loại màu chủ đề theo cách nhất quán. Dưới đây là một số biến Sass lưu trữ kết quả của các hàm light() và darken()

$backgroundColor: rgb(82, 172, 240);
$lightBackgroundCcolor: lighten($backgroundColor, 16%);
$hoverColor: blue;
$darkHoverColor: darken($hoverColor, 20%);
$focusBorderColor: darkgray;
$darkFocusBorderColor: darken($focusBorderColor, 40%);

Chúng có thể được áp dụng trực tiếp cho các phần tử trang thông qua các quy tắc CSS. Tuy nhiên, có những lúc điều đó là không thể, chẳng hạn như khi một thành phần Góc chấp nhận màu sắc làm tham số @Input, như được sử dụng trong Hướng dẫn về Phạm vi biến CSS trong Bản trình diễn góc

Bạn có thể thử ước tính tác dụng của các hàm Sass trong TypeScript, nhưng kết quả của bạn sẽ khác nhau về tính nhất quán và gần như chắc chắn sẽ không khớp với kết quả của các hàm Sass. Do đó, giải pháp lý tưởng là đọc các màu Sass và cung cấp chúng cho các thành phần cần chúng

Đọc. Giới thiệu về TypeScript và các tính năng của nó

Đọc các biến CSS từ dịch vụ

Bước đầu tiên để đọc các biến Sass mà chúng tôi đã khai báo ở trên là lưu trữ chúng trong các biến CSS tiêu chuẩn. Để làm điều đó, các giá trị thuộc tính phải được viết trong phép nội suy

Bạn cũng nên giới hạn phạm vi biến đối với thẻ bên ngoài ứng dụng của mình để không tràn vào nội dung xung quanh, nếu ứng dụng của bạn là một phần của trang lớn hơn

  application content

ColorService của chúng tôi sẽ hiển thị một phương thức công khai có tên loadColors(). Nó sẽ chấp nhận một mảng màu để tải, cùng với Bản đồ để liên kết các màu đã tải với tên của chúng. Phương thức getElementsByClassName() của tài liệu sẽ lấy phần tử 'color-demo-app'. Sau đó nó được chuyển đến cửa sổ. getComputedStyle() để truy xuất tất cả các kiểu phần tử. Nó trả về một CSSStyleDeclaration cung cấp phương thức getPropertyValue(). Sử dụng nó để tìm nạp giá trị của từng biến màu, sau đó chúng ta có thể thêm cả thuộc tính và giá trị màu vào colorMap

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

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

Sử dụng dịch vụ màu

Trong AppComponent, tất cả những gì chúng ta cần làm bây giờ là gọi dịch vụ của mình để lấy hàng. Tôi nảy ra ý tưởng chia tên màu thành các màu và hiệu ứng chức năng để thực thi các quy ước đặt tên

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

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

Một vài điều cần lưu ý về đoạn mã trên

• ColorService được khai báo trong mảng nhà cung cấp
• Sau đó, nó được đưa vào thành phần dưới dạng đối số hàm tạo. Điều đó sẽ cho phép chúng tôi tham khảo nó sau

Trong OnInit, chúng ta sẽ khởi tạo biến _colorMap mà chúng ta đã tạo ở trên và chuyển nó đến phương thức loadColors() của colorService, cùng với COLOR_LIST

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

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

Không có gì được trả về từ loadColors() bởi vì, với tư cách là một đối tượng, colorMap được chuyển qua tham chiếu. Do đó, nó giữ lại dữ liệu của nó ngay cả sau khi chức năng đã kết thúc. Nếu chúng ta làm một giao diện điều khiển. log() trên colorMap sau khi gọi loadColors(), chúng ta sẽ thấy rằng tất cả sáu màu của chúng ta đã được đọc

Kết luận Dịch vụ góc và đọc các biến Sass

Có nhiều cách khác để đọc các biến Sass từ các ứng dụng Angular, nhưng đây là phương pháp chúng tôi sử dụng trong công việc hàng ngày của mình. Có một bản demo với mã hôm nay trên stackblitz. Trên thực tế, bạn sẽ thấy rằng nó chứa nhiều mã hơn chúng tôi trình bày ở đây hôm nay. Chúng ta sẽ nói về nó trong bài viết tiếp theo

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

Bạn có thể sử dụng các biến trong SCSS không?

Bạn có thể tự động thay đổi giá trị biến SCSS không?

Tôi nên sử dụng biến CSS hay biến SCSS?