Sample code for programmatically processing CSS styles

Benefits of a programmatic approach

1. Global control to avoid scattered styles

2. Simple code and fast development Functional programming uses a lot of functions to reduce code duplication, so the program is shorter and the development speed is faster.

3. Close to natural language, easy to understand Functional programming has a high degree of freedom, and you can write code that is very close to natural language

4. More convenient code management

5. Writing style becomes an art

Less

Bad

.card-title {
    font: "PingFang-SC-medium";
    color: #333;
    font-size: 18px;
}

.card-title {
    font: "PingFang-SC-regular";
    font-size: 14px;
    color: #333;
}

Good

// declare less function.mixin-font-class(@fontColor: yellow; @fontSize; @fontFamily) {
    font-family: @fontFamily;
    font-size: @fontSize;
    color: @fontColor;
}

application

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

Global Less

In Vue-cli mode

// Add global less
pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns:
                resolve('./src/less/theme.less')
            ]
        }
},

// Use <style lang="less" scoped> in any component or less file
.breadTop {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 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");
       }
}
</style>

scss

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

@mixin font-class($fontFamily, $fontSize, $fontColor) {
    font-family: $fontFamily;
    font-size: $fontSize;
    color: $fontColor;
}

@mixin font-large($size: 14px, $color: $font-normal-color) {
    @include font-class($font-family-medium, $size, $color);
}

@mixin font-normal($size: 14px, $color: $font-light-color) {
    @include font-class($font-family-regular, $size, $color);
}

use

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

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

Note that the less function uses @ as a parameter, and scss uses $

This is the end of this article about programmatic processing of CSS styles. For more relevant content about programmatic processing of CSS styles, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<: MySQL helps you understand index pushdown in seconds

>>: Detailed explanation of the JavaScript timer principle