Chúng ta có thể sử dụng biến ts trong scss không?

Sass – viết tắt của Syntactally Awesome Style Sheets – là một trình biên dịch CSS giúp đơn giản hóa việc viết CSS. Đó là một lựa chọn phổ biến của các nhà phát triển Angular bởi vì, bên cạnh việc giảm đáng kể lượng dư thừa trong các quy tắc CSS, Sass còn được hỗ trợ bởi Angular CLI. Trên thực tế, đó là một trong những lựa chọn của bạn bất cứ khi nào bạn tạo một dự án mới

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

.color-demo-app {
  --background-color: #{$backgroundColor};
  --light-background-color: #{$lightBackgroundCcolor};
  --hover-color: #{$hoverColor};
  --dark-hover-color: #{$darkHoverColor};
  --focus-border-color: #{$focusBorderColor};
  --dark-focus-border-color: #{$darkFocusBorderColor};
}

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

import { Injectable } from '@angular/core';

@Injectable[]
export class ColorService {
  public loadColors[colors: string[], colorMap: Map] {
    // Read the custom property of body section with given name:
    const appElement = document.getElementsByClassName['color-demo-app'];
    if [appElement && appElement.length > 0] {
      const appStyles = window.getComputedStyle[appElement[0]];
      colors.forEach[[el] => {
        colorMap.set[
          el, 
          appStyles.getPropertyValue[el].replace[' ', '']
        ];
      }];
    }
  }
}

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

const CSS_PREFIX = "--";
const CSS_SUFFIX = "color";

enum PropertyNames {
  background  = 'background',
  hover       = 'hover',
  focusborder = 'focus-border'
}

enum ColorOptions {
  standard = '',
  light    = 'light',
  dark     = 'dark'
} 

const COLOR_LIST = [
  `${CSS_PREFIX}${PropertyNames.background}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.light}-${PropertyNames.background}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${PropertyNames.hover}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.dark}-${PropertyNames.hover}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${PropertyNames.focusborder}-${CSS_SUFFIX}`,
  `${CSS_PREFIX}${ColorOptions.dark}-${PropertyNames.focusborder}-${CSS_SUFFIX}`
];

@Component[{
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [ColorService]
}]
export class AppComponent implements OnInit {
  // Expose enums to the template
  public PropertyNames = PropertyNames;
  public ColorOptions = ColorOptions;

  private _colorMap: Map

  constructor[private colorService: ColorService] { }
   
}

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ó vào phương thức loadColors[] của colorService, cùng với COLOR_LIST

ngOnInit[]: void { 
  this._colorMap = new Map[];
  this.colorService.loadColors[COLOR_LIST, colorMap];
}

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 biến bản thảo trong SCSS 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?