Beispielcode für die programmgesteuerte Verarbeitung von CSS-Stilen

.Kartentitel {
    Schriftart: „PingFang-SC-medium“;
    Farbe: #333;
    Schriftgröße: 18px;
}

.Kartentitel {
    Schriftart: „PingFang-SC-regular“;
    Schriftgröße: 14px;
    Farbe: #333;
}

// weniger deklarieren function.mixin-font-class(@fontColor: yellow; @fontSize; @fontFamily) {
    Schriftfamilie: @fontFamily;
    Schriftgröße: @fontSize;
    Farbe: @Schriftfarbe;
}

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

// Globales Less hinzufügen
Plugin-Optionen: {
        'Stil-Ressourcen-Loader': {
            Vorprozessor: "weniger",
            Muster:
                auflösen('./src/less/theme.less')
            ]
        }
},

// Verwenden Sie <style lang="less" scoped> in jeder Komponente oder Less-Datei
.breadTop {
    Höhe: 60px;
    Anzeige: Flex;
    Elemente ausrichten: zentrieren;
    Inhalt ausrichten: Abstand dazwischen;
    Polsterung rechts: 15px;
    h6 {
        .mixin-font-class(@fontColor:rot;@fontSize:12px;@fontFamily:"PingFang-SC-medium");
       }
       h2{
            .mixin-font-class(@fontColor:blau;@fontSize:15px;@fontFamily:"PingFang-SC-regular");
       }
}
</Stil>

$font-normal-color = #222;
$font-light-color = #333;

@mixin Schriftklasse($Schriftfamilie, $Schriftgröße, $Schriftfarbe) {
    Schriftfamilie: $fontFamily;
    Schriftgröße: $fontSize;
    Farbe: $Schriftfarbe;
}

@mixin Schriftgröße groß($Größe: 14px, $Farbe: $Schriftgröße normal) {
    @include Schriftklasse($Schriftfamilie-medium, $Größe, $Farbe);
}

@mixin Schriftgröße normal ($Größe: 14px, $Farbe: $Schriftart hell) {
    @include Schriftklasse($Schriftfamilie-regular, $Größe, $Farbe);
}

.form-title {
    @include font-large(16px, rot);
}

.form-text {
    @include font-large(12px, blau);
}