SCSS compiled to CSS causing nested selectors errors

user_16515033 0
Viewed 208

I noticed when in using either VS code using the watch SASS sass --watch assets/css/styles.scss assets/css/style.css

  1. nested scss class with "&" need to have a ","
  2. nested css classes dont need "," just a whitespace

My browser shows that it suddenly flips upside down when i add a "," after the ampersand (&)

  1. SCSS File

    .about{ &__open**,** &__arrow { transform: rotate(-180deg); } }

Compiles to CSS

.skills__open**,** .skills__arrow {
  transform: rotate(-180deg);
}

and the results in the css not working because CSS doesnt need ","

It would only work when i remove the "," after the ampersand (&), but that shouldnt be necessary cuz sass/scss usually needs a "," for nested selectors. Can someone explain why theres an issue with the compile?

Additionally however for other scenarios the "," after ampersand (&) compiles to css just fine but its just this one area in particular...

Heres the code and heres the preview of the error vs right one enter image description here enter image description here

NOTE: i am using css variables for the colors, and the rest i am using scss. Currently the stackoverflow only accepts css, therefore im putting scss code in a css file... It wont compile but just to reference

/*==================== ACCORDION SKILLS ====================*/
const skillsContent = document.getElementsByClassName('skills__content'),
      skillsHeader = document.querySelectorAll('.skills__header')

function toggleSkills(){
    let itemClass = this.parentNode.className
    
    for(i = 0; i < skillsContent.length; i++){
        skillsContent[i].className = 'skills__content skills__close'
    }
    if(itemClass === 'skills__content skills__close'){
        this.parentNode.className = 'skills__content skills__open'
    }
}

skillsHeader.forEach((el) => {
    el.addEventListener('click', toggleSkills)
})
:root {
--header-height: 3rem;

/*========== Colors ==========*/
/* Change favorite color */
--hue-color: 250; /*Purple 250 - Green 142 - Blue 230 - Pink 340*/

/* HSL color mode */
--first-color:hsl(var(--hue-color), 69%, 61%) ;
--first-color-second:hsl(var(--hue-color), 69%, 61%) ;
--first-color-alt:hsl(var(--hue-color), 57%, 53%) ;
--first-color-lighter: hsl(var(--hue-color), 92%, 85%) ;
--title-color:hsl(var(--hue-color), 8%, 15%) ;
--text-color:hsl(var(--hue-color), 8%, 45%) ;
--text-color-light:hsl(var(--hue-color),8%, 65%) ;
--input-color: hsl(var(--hue-color), 70%, 96%) ;
--body-color:hsl(var(--hue-color), 60%, 99%) ;
--container-color:#FFF ;

/*========== Font and typography ==========*/
--body-font:'Poppins', sans-serif;

/* .5rem = 8px, 1rem = 16px, 1.5rem = 24px ... */
--big-font-size: 2rem;
--h1-font-size: 1.5rem;
--h2-font-size: 1.25rem;
--h3-font-size: 1.125rem;
--normal-font-size: .938rem;
--small-font-size: .813rem;
--smaller-font-size: .75rem;

/*========== Font weight ==========*/
--font-medium: 500;
--font-semi-bold: 600;

/*========== Margenes Bottom ==========*/
/* .25rem = 4px, .5rem = 8px, .75rem = 12px ... */
--mb-0-25: .25rem;
--mb-0-5: .5rem;
--mb-0-75: .75rem;
--mb-1: 1rem;
--mb-1-5: 1.5rem;
--mb-2: 2rem;
--mb-2-5: 2.5rem;
--mb-3: 3rem;

/*========== z index ==========*/
 --z-tooltip: 10;
--z-fixed: 100;
--z-modal: 1000;
}

/* Font size for large devices */
@media screen and (min-width: 968px) {
  :root {
--big-font-size: 3rem;
--h1-font-size: 2.25rem;
--h2-font-size: 1.5rem;
--h3-font-size: 1.25rem;
--normal-font-size: 1rem;
--small-font-size: .875rem;
--smaller-font-size: .813rem;
  }
}

/*==================== REUSABLE CSS CLASSES ====================*/
.section{
padding: 2rem 0 4rem;
}

.section__title{
font-size: var(--h1-font-size);
color: var(--title-color);
}

.section__subtitle{
font-size: var(--small-font-size);
display:block;
margin-bottom: var(--mb-3);
}

.section__title,
.section__subtitle{
text-align: center;
}

/*==================== LAYOUT ====================*/
.container{
max-width: 768px;
margin-left: var(--mb-1-5);
margin-right: var(--mb-1-5);
}

.grid{
display: grid;
gap: 1.5rem;
}

.header{
width: 100%;
position: fixed;
bottom: 0;
left: 0;
z-index: var(--z-fixed);
background-color: var(--body-color);
}
/*==================== SKILLS ====================*/

 .skills{
    &__container{
        row-gap:0;
    }

    &__header{
        display: flex;
        align-items: center;
        margin-bottom: var(--mb-2-5);
        cursor: pointer;
    }

    &__icon
    &__arrow{
        font-size: 2rem;
    }

    &__icon {
     margin-right: var(--mb-0-75);
    }

    &__title {
        font-size: var(--h3-font-size);
    }

    &__subtitle {
        font-size: var(--smaller-font-size);
        color: var(--text-color-light);
    }

    &__arrow {
        margin-left: auto;
        transition: .4s;
    }

    &__list {
        row-gap: 1.5rem;
        padding-left: 2.7rem;
    }

    &__titles {
      display: flex;
      justify-content: space-between;
      margin-bottom: var(--mb-0-5);
    }

    &__name {
      font-size: var(--normal-font-size);
      font-weight: var(--font-medium);
    }

    &__bar &__percentage {
      height: 5px;
      border-radius: .25rem;
    }

    &__bar {
      background-color: var(--first-color-lighter);
    }

    &__percentage {
      display: block;
      background-color: var(--first-color);
    }

    &__html {
    width: 90%;
    }

    &__css {
    width: 80%;
    }

    &__js {
    width: 60%;
    }

    &__react {
    width: 85%;
    }

    &__php {
    width: 80%;
    }

    &__node {
    width: 70%;
    }

    &__firebase {
    width: 90%;
    }

    &__python {
    width: 55%;
    }

    &__figma {
    width: 90%;
    }

    &__sketch {
    width: 85%;
    }

    &__photoshop {
    width: 85%;
    }

    &__close
    &__list {
    height: 0px;
    overflow: hidden;
    }

    &__open
    &__list {
    height: max-content;
    margin-bottom: var(--mb-2-5);
    }

    &__open
    &__arrow {
    transform: rotate(-180deg);
    }

}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--==================== UNICONS ====================-->
    <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css">

    <!--==================== SWIPER CSS====================-->
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">

    <!--==================== CSS ==========-->
    <link rel="stylesheet" href="assets/css/style.css">

    <title>Responsive Portfolio Website</title>
</head>

<body>
<!--==================== SKILLS ====================-->
        <section class="skills section" id="skills">
            <h2 class="section__title">Skills</h2>
            <span class="section__subtitle">My technical level</span>

            <div class="skills__container container grid">
                <div>
                    <!--=============== SKILLS 1 ===============-->
                    <div class="skills__content skills__open">
                        <div class="skills__header">
                            <i class="uil uil-brackets-curly skills__icon"></i>

                            <div>
                                <h1 class="skills__title">Frontend developer</h1>
                                <span class="skills__subtitle"> 1 year</span>
                            </div>

                            <i class="uil uil-angle-down skills__arrow"></i>
                        </div>

                        <div class="skills__list grid">
                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">HTML</h3>
                                    <span class="skills__number">90%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__html"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">CSS</h3>
                                    <span class="skills__number">80%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__css"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">JavaScript</h3>
                                    <span class="skills__number">60%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__js"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">React</h3>
                                    <span class="skills__number">85%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__react"></span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--=============== SKILLS 2 ===============-->
                    <div class="skills__content skills__close">
                        <div class="skills__header">
                            <i class="uil uil-server-network skills__icon"></i>

                            <div>
                                <h1 class="skills__title">Backend developer</h1>
                                <span class="skills__subtitle">More than 2 years</span>
                            </div>

                            <i class="uil uil-angle-down skills__arrow"></i>
                        </div>

                        <div class="skills__list grid">
                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">PHP</h3>
                                    <span class="skills__number">80%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__php"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">Node Js</h3>
                                    <span class="skills__number">70%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__node"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">Firebase</h3>
                                    <span class="skills__number">90%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__firebase"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">Python</h3>
                                    <span class="skills__number">55%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__python"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div>
                    <!--=============== SKILLS 3 ===============-->
                    <div class="skills__content skills__close">
                        <div class="skills__header">
                            <i class="uil uil-swatchbook skills__icon"></i>

                            <div>
                                <h1 class="skills__title">Designer</h1>
                                <span class="skills__subtitle">More than 5 years</span>
                            </div>

                            <i class="uil uil-angle-down skills__arrow"></i>
                        </div>

                        <div class="skills__list grid">
                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">Figma</h3>
                                    <span class="skills__number">90%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__figma"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">Sketch</h3>
                                    <span class="skills__number">85%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__sketch"></span>
                                </div>
                            </div>

                            <div class="skills__data">
                                <div class="skills__titles">
                                    <h3 class="skills__name">Photoshop</h3>
                                    <span class="skills__number">85%</span>
                                </div>
                                <div class="skills__bar">
                                    <span class="skills__percentage skills__photoshop"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
       </body>
      </html>

sass compilation css
0 Answers
Related