SCSS Code Simplification

December 27, 2024 · AI Conversations

User

.elementor-widget-button {
.elementor-button {
font-weight: $font-weight-medium;
background-color: $color-primary;
color: $color-white;
border-width: 1px;
border-style: solid;

.elementor-align-icon-left {
margin-right: 12px;
}

.elementor-align-icon-right {
margin-left: 12px;
}
}

.elementor-button:hover {
background-color: $color-white;
border-color: $color-primary;
color: $color-primary;
}

&.elementor-button-info {
.elementor-button {
background-color: $color-primary;
color: $color-white;
border-color: $color-primary;
}
}

&.elementor-button-success {
.elementor-button {
background-color: $color-primary;
color: $color-white;
}
}
}
simplyfy abovre scss

Assistant

Here’s a simplified version of your SCSS code:

.elementor-widget-button {
    .elementor-button {
        font-weight: $font-weight-medium;
        background-color: $color-primary;
        color: $color-white;
        border: 1px solid $color-primary;

        &.elementor-align-icon-left {
            margin-right: 12px;
        }

        &.elementor-align-icon-right {
            margin-left: 12px;
        }

        &:hover {
            background-color: $color-white;
            border-color: $color-primary;
            color: $color-primary;
        }
    }

    &.elementor-button-info,
    &.elementor-button-success {
        .elementor-button {
            background-color: $color-primary;
            color: $color-white;
        }
    }
}

### Key Changes:
1. **Merged `border-width` and `border-style` into `border`.**
2. **Grouped `.elementor-align-icon-left` and `.elementor-align-icon-right` under the `&`.**
3. **Unified duplicate styles for `.elementor-button-info` and `.elementor-button-success`.**

User

convert it to simple css

Assistant

Here’s the equivalent simplified CSS version:

.elementor-widget-button .elementor-button {
    font-weight: var(--font-weight-medium);
    background-color: var(--color-primary);
    color: var(--color-white);
    border: 1px solid var(--color-primary);
}

.elementor-widget-button .elementor-button.elementor-align-icon-left {
    margin-right: 12px;
}

.elementor-widget-button .elementor-button.elementor-align-icon-right {
    margin-left: 12px;
}

.elementor-widget-button .elementor-button:hover {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.elementor-widget-button.elementor-button-info .elementor-button,
.elementor-widget-button.elementor-button-success .elementor-button {
    background-color: var(--color-primary);
    color: var(--color-white);
}

### Notes:
1. SCSS variables like `$font-weight-medium`, `$color-primary`, and `$color-white` are replaced with CSS custom properties (e.g., `var(–color-primary)`).
2. Simplified the repeated rules for `.elementor-button-info` and `.elementor-button-success`.

SCSS Code Simplification

Leave a Comment Cancel