CSS スタイルをプログラムで処理するためのサンプル コード

.カードタイトル{
    フォント: "PingFang-SC-medium";
    色: #333;
    フォントサイズ: 18px;
}

.カードタイトル{
    フォント: "PingFang-SC-regular";
    フォントサイズ: 14px;
    色: #333;
}

// less を宣言する function.mixin-font-class(@fontColor: yellow; @fontSize; @fontFamily) {
    フォントファミリ: @fontFamily;
    フォントサイズ: @fontSize;
    色: @fontColor;
}

h6 {
        .mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium");
}
h2{
      .mixin-font-class(@fontColor:blue;@fontSize:15px;@fontFamily:"PingFang-SC-regular");
}

// グローバル less を追加
プラグインオプション: {
        'スタイルリソースローダー': {
            プリプロセッサ: 'less'、
            パターン:
                解決('./src/less/theme.less')
            ]
        }
},

// 任意のコンポーネントまたは less ファイルで <style lang="less" scoped> を使用します
.breadTop {
    高さ: 60px;
    ディスプレイ: フレックス;
    アイテムの位置を中央揃えにします。
    コンテンツの両端揃え: スペースの間;
    右パディング: 15px;
    h6 {
        .mixin-font-class(@fontColor:red;@fontSize:12px;@fontFamily:"PingFang-SC-medium");
       }
       h2{
            .mixin-font-class(@fontColor:blue;@fontSize:15px;@fontFamily:"PingFang-SC-regular");
       }
}
</スタイル>

フォントの通常の色 = #222;
$font-light-color = #333;

@mixin フォントクラス($fontFamily、$fontSize、$fontColor) {
    フォントファミリ: $fontFamily;
    フォントサイズ: $fontSize;
    色: $fontColor;
}

@mixin font-large($size: 14px, $color: $font-normal-color) {
    フォントクラスを($font-family-medium、$size、$color)含めます。
}

@mixin フォント通常($size: 14px, $color: $font-light-color) {
    フォントクラスを($font-family-regular、$size、$color)含めます。
}

.フォームタイトル{
    @include font-large(16px, 赤);
}

.フォームテキスト{
    @include フォントサイズ12px、青;
}