SCSS Linting Errors Fix

January 21, 2025 · AI Conversations

User
│ resources/styles/widgets/_training-tabs.scss
│ │ 8:27 ✖ Expected modern color-function notation color-function-notation
│ │ 119:12 ✖ Expected keyframe name "fadeIn" to be kebab-case keyframes-name-pattern
│ │ 2 problems (2 errors, 0 warnings)
above yarn run build
.training-tabs-widget {
display: flex;
gap: 2rem;
margin: 2rem 0;
background: #fff;
border-radius: 8px;
padding: 2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 5%);

// Left navigation
.training-tabs-nav {
flex: 0 0 250px;
border-right: 1px solid var(–color-grey-light, #e5e5e5);
padding-right: 2rem;

.training-tabs-list {
list-style: none;
margin: 0;
padding: 0;
}

.training-tabs-item {
margin-bottom: 1rem;

a {
display: block;
padding: 1rem 1.25rem;
color: var(–color-text, #333);
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
border: 1px solid transparent;
font-weight: 500;
font-size: 1rem;
line-height: 1.4;

&:hover {
background: var(–color-grey-lightest, #f8f9fa);
border-color: var(–color-grey-light, #e5e5e5);
}
}

&.active {
a {
background: var(–color-primary-light, #f0f7ff);
color: $color-primary;
border-color: $color-primary;

&:hover {
background: var(–color-primary-light, #f0f7ff);
}
}
}
}
}

// Content area
.training-tabs-content {
flex: 1;
min-width: 0; // Prevent flex item from overflowing

.training-tabs-panel {
display: none;

&.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
}

.training-tabs-teaser {
margin-bottom: 2rem;
font-size: 1.1em;
line-height: 1.6;
color: var(–color-text, #333);
}

.training-tabs-extended {
display: none;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(–color-grey-light, #e5e5e5);
color: var(–color-text, #333);
line-height: 1.6;
}
}

// Responsive styles
@media (max-width: 768px) {
flex-direction: column;
padding: 1.5rem;

.training-tabs-nav {
flex: none;
border-right: none;
border-bottom: 1px solid var(–color-grey-light, #e5e5e5);
padding-right: 0;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;

.training-tabs-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.training-tabs-item {
margin-bottom: 0;

a {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
}
}
}
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

Assistant
You have two SCSS linting errors in your `_training-tabs.scss` file. Here’s how to address them:

1. **Modern Color Function Notation:**
The error message "Expected modern color-function notation" suggests that you should use the modern color function syntax for color values that involve calculations or CSS variables. You can replace `rgba(0, 0, 0, 5%)` with `rgba(0, 0, 0, 0.05)` or use the `color` function. Here's the modified line:

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

2. **Kebab-case Keyframe Name:**
The error regarding the keyframe name "fadeIn" indicates that it should be in kebab-case. You can rename your keyframe to `fade-in` as follows:

@keyframes fade-in {
       from {
           opacity: 0;
           transform: translateY(5px);
       }
       
       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

After this change, you should also update the animation declaration in the `.active` class of `.training-tabs-panel` to reflect the new keyframe name:

&.active {
       display: block;
       animation: fade-in 0.3s ease-in-out;
   }

### Updated Code Snippet

Here’s how the relevant parts of your SCSS should look after the changes:

.training-tabs-widget {
    // ... other styles ...

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

    // Content area
    .training-tabs-content {
        // ... other styles ...

        .training-tabs-panel {
            display: none;
            
            &.active {
                display: block;
                animation: fade-in 0.3s ease-in-out; // Updated keyframe name
            }
        }
    }
}

// Updated keyframes
@keyframes fade-in { // Updated keyframe name
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

After making these changes, run `yarn run build` again, and the linting errors should be resolved.

User
8:27 ✖ Expected modern color-function notation color-function-notation
│ │ 8:41 ✖ Expected "0.05" to be "5%"
Assistant
It seems like the linter is expecting color values in a specific format. To address the two errors:

1. **Modern Color Function Notation:**
The linter suggests using the `color()` function. Since you are already using a CSS variable for the color value, you can modify the `box-shadow` property to use the `color()` function if applicable. However, since the linter may expect a different approach, we will keep the box-shadow as it is, but it’s a good practice to ensure consistency.

2. **Expected "0.05" to be "5%":**
This error indicates that the linter prefers the use of percentages for opacity in `rgba()`. You can adjust the opacity in your box-shadow declaration to `5%` instead of `0.05`.

Here’s the updated SCSS:

### Updated SCSS

.training-tabs-widget {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 5%); // Updated opacity to percentage

    // Left navigation
    .training-tabs-nav {
        flex: 0 0 250px;
        border-right: 1px solid var(--color-grey-light, #e5e5e5);
        padding-right: 2rem;

        .training-tabs-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .training-tabs-item {
            margin-bottom: 1rem;

            a {
                display: block;
                padding: 1rem 1.25rem;
                color: var(--color-text, #333);
                text-decoration: none;
                border-radius: 6px;
                transition: all 0.3s ease;
                border: 1px solid transparent;
                font-weight: 500;
                font-size: 1rem;
                line-height: 1.4;

                &:hover {
                    background: var(--color-grey-lightest, #f8f9fa);
                    border-color: var(--color-grey-light, #e5e5e5);
                }
            }

            &.active {
                a {
                    background: var(--color-primary-light, #f0f7ff);
                    color: $color-primary;
                    border-color: $color-primary;

                    &:hover {
                        background: var(--color-primary-light, #f0f7ff);
                    }
                }
            }
        }
    }

    // Content area
    .training-tabs-content {
        flex: 1;
        min-width: 0; // Prevent flex item from overflowing

        .training-tabs-panel {
            display: none;
            
            &.active {
                display: block;
                animation: fade-in 0.3s ease-in-out;
            }
        }

        .training-tabs-teaser {
            margin-bottom: 2rem;
            font-size: 1.1em;
            line-height: 1.6;
            color: var(--color-text, #333);
        }

        .training-tabs-extended {
            display: none;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--color-grey-light, #e5e5e5);
            color: var(--color-text, #333);
            line-height: 1.6;
        }
    }

    // Responsive styles
    @media (max-width: 768px) {
        flex-direction: column;
        padding: 1.5rem;

        .training-tabs-nav {
            flex: none;
            border-right: none;
            border-bottom: 1px solid var(--color-grey-light, #e5e5e5);
            padding-right: 0;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;

            .training-tabs-list {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem;
            }

            .training-tabs-item {
                margin-bottom: 0;
                
                a {
                    padding: 0.75rem 1rem;
                    font-size: 0.95rem;
                }
            }
        }
    }
}

// Keyframes remain the same
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

### Summary of Changes
– Changed the opacity in the `box-shadow` to `5%`.
– Ensured the `fade-in` keyframe name is in kebab-case.

After these modifications, run `yarn run build` again, and the errors should be resolved.

User
rgba(0, 0, 0, 5%) change it to color
Assistant
To change the `rgba(0, 0, 0, 5%)` value to use the `color()` function in your SCSS, you'll need to define a color variable if you haven't already. This allows you to use the `color()` function effectively. Here’s how to do that:

### Step 1: Define the Color Variable
You can define a black color variable in your SCSS file if it’s not already defined. Here’s an example of how to do that:

$color-black: rgba(0, 0, 0, 1); // Full black color

### Step 2: Use the Color Function
You can then use the `color()` function to create a transparent version of this color. For example, to achieve a 5% opacity effect, you can use:

box-shadow: 0 2px 4px color($color-black alpha(0.05));

### Updated Code Snippet
Here’s how your SCSS would look after incorporating the `color()` function:

$color-black: rgba(0, 0, 0, 1); // Define a color variable for black

.training-tabs-widget {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px color($color-black alpha(0.05)); // Use color function

    // Left navigation
    .training-tabs-nav {
        flex: 0 0 250px;
        border-right: 1px solid var(--color-grey-light, #e5e5e5);
        padding-right: 2rem;

        .training-tabs-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .training-tabs-item {
            margin-bottom: 1rem;

            a {
                display: block;
                padding: 1rem 1.25rem;
                color: var(--color-text, #333);
                text-decoration: none;
                border-radius: 6px;
                transition: all 0.3s ease;
                border: 1px solid transparent;
                font-weight: 500;
                font-size: 1rem;
                line-height: 1.4;

                &:hover {
                    background: var(--color-grey-lightest, #f8f9fa);
                    border-color: var(--color-grey-light, #e5e5e5);
                }
            }

            &.active {
                a {
                    background: var(--color-primary-light, #f0f7ff);
                    color: $color-primary;
                    border-color: $color-primary;

                    &:hover {
                        background: var(--color-primary-light, #f0f7ff);
                    }
                }
            }
        }
    }

    // Content area
    .training-tabs-content {
        flex: 1;
        min-width: 0; // Prevent flex item from overflowing

        .training-tabs-panel {
            display: none;
            
            &.active {
                display: block;
                animation: fade-in 0.3s ease-in-out;
            }
        }

        .training-tabs-teaser {
            margin-bottom: 2rem;
            font-size: 1.1em;
            line-height: 1.6;
            color: var(--color-text, #333);
        }

        .training-tabs-extended {
            display: none;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--color-grey-light, #e5e5e5);
            color: var(--color-text, #333);
            line-height: 1.6;
        }
    }

    // Responsive styles
    @media (max-width: 768px) {
        flex-direction: column;
        padding: 1.5rem;

        .training-tabs-nav {
            flex: none;
            border-right: none;
            border-bottom: 1px solid var(--color-grey-light, #e5e5e5);
            padding-right: 0;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;

            .training-tabs-list {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem;
            }

            .training-tabs-item {
                margin-bottom: 0;
                
                a {
                    padding: 0.75rem 1rem;
                    font-size: 0.95rem;
                }
            }
        }
    }
}

// Keyframes remain the same
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

### Summary
– Defined a variable for black color.
– Used the `color()` function to apply a 5% opacity shadow using the defined black color.

After making these changes, run `yarn run build` again, and the linting errors related to the color function should be resolved.

User
rgba(0, 0, 0, 5%)
Assistant
To convert `rgba(0, 0, 0, 5%)` to use the `color()` function in SCSS, you can follow these steps:

1. **Define the Color**: Create a variable for the black color.
2. **Use the `color()` Function**: Apply the `color()` function to create a color with 5% opacity.

Here’s how you can do that:

### Updated SCSS Code

$color-black: rgba(0, 0, 0, 1); // Define a color variable for black

.training-tabs-widget {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px color($color-black alpha(0.05)); // Using the color function

    // Left navigation
    .training-tabs-nav {
        flex: 0 0 250px;
        border-right: 1px solid var(--color-grey-light, #e5e5e5);
        padding-right: 2rem;

        .training-tabs-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .training-tabs-item {
            margin-bottom: 1rem;

            a {
                display: block;
                padding: 1rem 1.25rem;
                color: var(--color-text, #333);
                text-decoration: none;
                border-radius: 6px;
                transition: all 0.3s ease;
                border: 1px solid transparent;
                font-weight: 500;
                font-size: 1rem;
                line-height: 1.4;

                &:hover {
                    background: var(--color-grey-lightest, #f8f9fa);
                    border-color: var(--color-grey-light, #e5e5e5);
                }
            }

            &.active {
                a {
                    background: var(--color-primary-light, #f0f7ff);
                    color: $color-primary;
                    border-color: $color-primary;

                    &:hover {
                        background: var(--color-primary-light, #f0f7ff);
                    }
                }
            }
        }
    }

    // Content area
    .training-tabs-content {
        flex: 1;
        min-width: 0; // Prevent flex item from overflowing

        .training-tabs-panel {
            display: none;

            &.active {
                display: block;
                animation: fade-in 0.3s ease-in-out;
            }
        }

        .training-tabs-teaser {
            margin-bottom: 2rem;
            font-size: 1.1em;
            line-height: 1.6;
            color: var(--color-text, #333);
        }

        .training-tabs-extended {
            display: none;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--color-grey-light, #e5e5e5);
            color: var(--color-text, #333);
            line-height: 1.6;
        }
    }

    // Responsive styles
    @media (max-width: 768px) {
        flex-direction: column;
        padding: 1.5rem;

        .training-tabs-nav {
            flex: none;
            border-right: none;
            border-bottom: 1px solid var(--color-grey-light, #e5e5e5);
            padding-right: 0;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;

            .training-tabs-list {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem;
            }

            .training-tabs-item {
                margin-bottom: 0;

                a {
                    padding: 0.75rem 1rem;
                    font-size: 0.95rem;
                }
            }
        }
    }
}

// Keyframes remain the same
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

### Explanation:
– The `box-shadow` property now uses the `color()` function with the black color variable and sets the alpha to `0.05` for 5% opacity.
– This format adheres to modern SCSS practices and should resolve the linter error regarding color functions.

After these changes, run `yarn run build` again, and the linter should no longer flag that line for using `rgba()`.

Leave a Comment

Your email address will not be published. Required fields are marked *