SCSS - Use of '%' to declare css style

ghz 8months ago ⋅ 67 views

Here's my problem :

I want to do this kind of class in my project (class="h-[2%]"), so I did this little bit of code but something isn't right.

I am not familiar with SCSS so I don't know why 'px' is doing good but '%' is just not ...

/* Pixels */
@for $i from 1 through 100 {
    .w-#{$i}px {
        width: #{$i}px
    }
}

/* Purcent */
@for $i from 1 through 100 {
    .w-#{$i}% {
        width: #{$i}%
    }
}

/* Pixels */
@for $i from 1 through 100 {
    .h-#{$i}px {
        height: #{$i}px
    }
}

/* Purcent */
@for $i from 1 through 100 {
    .h-#{$i}% {
        height: #{$i}%
    }
}

I have tried some weird things like : '%' % '%' '%' but I don't think it is the way to go.

Answers

Your SCSS code looks correct, and it should generate CSS classes for both pixel and percentage-based widths and heights. However, there might be an issue with how you are applying these classes in your HTML or how your browser is interpreting them.

Here's a few things you can check:

  1. HTML Structure: Make sure your HTML structure is correct and that you are applying the classes to the appropriate elements.

  2. Cascading Order: Ensure that the CSS classes you're generating are not being overridden by other styles with higher specificity or later in the stylesheet.

  3. Browser Rendering: Check if the issue persists across different browsers. Sometimes, browser rendering engines may have quirks that affect how they handle certain CSS properties.

  4. Inspect Element: Use your browser's developer tools to inspect the elements and see if the styles are being applied correctly. This can help you identify if there are any conflicts or issues with your CSS.

  5. SCSS Compiler: Ensure that your SCSS compiler is configured correctly and is generating the expected CSS output. Sometimes, errors in the SCSS compilation process can result in unexpected behavior in the generated CSS.

If you're still facing issues after checking these points, please provide more details or context about how you're applying these classes and how they're behaving differently than expected.

#css