Angular-scss (@include 与 @mixin) 样式封装！ [同一标签不同样式]

最新推荐文章于 2024-04-22 14:31:37 发布

段旭文

最新推荐文章于 2024-04-22 14:31:37 发布

阅读量490

点赞数 1

分类专栏： Angular HTML scss 文章标签：前端

本文链接：https://blog.csdn.net/qq_33538554/article/details/112987760

版权

HTML 同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

Angular

8 篇文章 0 订阅

订阅专栏

scss

1 篇文章 0 订阅

订阅专栏

① 创建一个 ui-theme 的组件。

ui-theme.component.html

<div class="testDemo" [ngClass] = "{'red-theme': isPlus, 'blue-theme': !isPlus}">
        <div *ngIf = "isPlus" class="background">
            <p  class="font">plus 版</p>
        </div>
        <div *ngIf = "!isPlus" class="background">
            <p  class="font">common 版</p>
        </div>
</div>

ui-theme.component.ts

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-ui-theme',
  templateUrl: './ui-theme.component.html',
  styleUrls: ['./ui-theme.component.scss']
})
export class UIThemeComponent implements OnInit {

  @Input() isPlus = false;
  constructor() { }

  ngOnInit(): void {
    this.isPlus = false;
  }

}

ui-theme.component.scss

@import "../ui-theme-styles.scss";

@mixin theme($name, $background_color, $font_color, $font_size, $font_weight) {

    .testDemo.#{$name}{
       .background {
           height: 200px;
           width: 200px;
           line-height: 200px;
           background:$background_color;
           .font {
               color: $font_color;
               font-size: $font_size;
               text-align: center;
               font-weight: $font_weight;
           }
       }
    }
}

@include theme(red-theme, $background_color_red, $font_color_light, $font_size_18, $font_weight_600);
@include theme(blue-theme, $background_color_blue, $font_color_White, $font_size_24, $font_weight_300);

②创建一个公共的样式表。

ui-theme-styles.scss

$background_color_red: #ff5b4d;
$background_color_blue: #34495e;
$font_color_White: #ffffff;
$font_color_light: #f8d5d5;
$font_size_18:18px;
$font_size_24:24px;
$font_weight_300: 300;
$font_weight_600: 600;

③在起始页 app.component.html 中应用 ui-theme 的组件。