CODEWITHSUNDEEP
htmlcsssass
Daniel Chu
Daniel Chu

Reputation: 77

Not getting SCSS working correctly? (Code Updated)

I'm currently trying to convert from CSS to SCSS as I saw SCSS have the ability to do nesting and I thought that it's easier to do code this way. However, I'm not getting it working correctly. In my regular CSS I used the > sign to get to the class I wanted. So I thought maybe I don't need it in SCSS.

My original CSS Codes are the following

/*** External CSS ***/
@import "normalize.css";

/*** Page ***/
html, body {
    margin: 0;
}

/*** Navigation ***/
.navbar {
    background-color: #ecf0f1;
    text-transform: uppercase;
    border-top: 5px solid #d1d064;
    letter-spacing: 3px;
}

.navbar::after {
    content: '';
    clear: both;
    display: block;
}
.navbar > .main-nav > ul,
li {
    list-style-type: none;
    text-decoration: none;
}

.navbar > .main-nav > ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar > .main-nav > ul > li {
    text-align: center;
    min-width: 175px;
    position: relative;
    display: block;
    float: left;
    border-right: 0.5px solid rgba(170, 170, 170, 0.2);
    border-left: 0.5px solid rgba(170, 170, 170, 0.2);
    display: inline;
}

.navbar > .main-nav > ul > li a {
    display: block;
    color: #7f8c8d;
    text-align: center;
    padding: 20px 16px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 17px;
}

.navbar > .main-nav > ul > li.active {
    box-shadow: 0 -5px 0 #fff;
}

.navbar > .main-nav > ul > li:hover {
    box-shadow: 0 -5px 0 #d1d064;
    transition: transform 250ms ease-in-out;
}

.navbar > .main-nav {
    max-width: 1480px;
    margin: 0 auto;
    text-align: center;
}
@-webkit-keyframes fill {
    0% {
        width: 0%;
        height: 5px;
    }
    50% {
        width: 100%;
        height: 5px;
    }
    100% {
        width: 100%;
        height: 100%;
        background: #d1d064;
    }
}

nav.fill ul li a {
    position: relative;
}

nav.fill ul li a:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: ' ';
    color: transparent;
    background: #aaa;
    height: 1px;
}

nav.fill ul li a {
    transition: all 2s;
}

nav.fill ul li a:after {
    text-align: left;
    content: '.';
    margin: 0;
    opacity: 0;
}

nav.fill ul li a:hover {
    color: #fff;
    z-index: 1;
}

nav.fill ul li a:hover:after {
    z-index: -10;
    animation: fill 1s forwards;
    -webkit-animation: fill 1s forwards;
    -moz-animation: fill 1s forwards;
    opacity: 1;
}

/*** Head ***/
.head::after {
    content: '';
    clear: both;
    display: block;
}
.head {
    min-height: 150px;
    display: block;
    width: 100%;
}
.company {
    margin: 0 auto;
    max-width: 1480px;
    font-size: 130px;
    color: #aaa;
    font-family: 'Lato', sans-serif;
    font-weight: lighter;

}
.company > .logo {
    float: left;
    width: auto;
    color: coral;
    text-transform: uppercase;
}
.company > .rightessential {
    float: right;
    width: auto;
    font-size: 20px;
    padding: 20px 20px 0 0;
}
<nav class="navbar fill">
        <div class="main-nav">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
                <li><a href="#">Fourth</a></li>
                <li><a href="#">Sixth</a></li>
                <li><a href="#">Seventh</a></li>
            </ul>
        </div>
    </nav>

And the following is what I'm trying to do in SCSS (Of course it won't work in code snippets) Outdated code

/*** External CSS ***/
@import "normalize.css";
/*** Page ***/
body,
html {
    margin: 0;
}
/*** Navigation Bar ***/
.navbar {
    background-color: #ecf0f1;
    text-transform: uppercase;
    border-top: 5px solid #d1d064;
    letter-spacing: 3px;

    &::after {
        content: '';
        clear: both;
        display: block;
    }
}

.main-nav {
    max-width: 1480px;
    margin: 0 auto;
    text-align: center;

    li,
    ul {
        list-style-type: none;
        text-decoration: none;
    }

    ul {
        margin: 0;
        padding: 0;
        box-sizing: border-box;

        li.active {
            box-shadow: 0 -5px 0 #fff;
        }

        li.hover {
            box-shadow: 0 -5px 0 #d1d064;
            transition: transform 250ms ease-in-out;
        }

        li {
            text-align: center;
            min-width: 175px;
            position: relative;
            display: block;
            float: left;
            border-right: 0.5px solid rgba(170, 170, 170, 0.2);
            border-left: 0.5px solid rgba (170, 170, 170, 0.2);
            display: inline;

            a {
                display: block;
                color: #7f8c8d;
                text-align: center;
                padding: 20px 16px;
                text-decoration: none;
                font-family: 'Oswald', sans-serif;
                font-weight: bold;
                font-size: 17px;
            }
        }
    }
}

.fill {
    ul li a {
        position: relative;
        transition: all 2s;
    }

    ul li a:after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0;
        content: ' ';
        color: transparent;
        background: #aaa;
        height: 1px;
        text-align: left;
        content: '.';
        margin: 0;
        opacity: 0;
    }

    ul li {
        a:hover {
            color: #fff;
            z-index: 1;
        }

        a:hover:after {
            z-index: -10;
            animation: fill 1s forwards;
            -webkit-animation: fill 1s forwards;
            -moz-animation: fill 1s forwards;
            opacity: 1;
        }
    }
}
@-webkit-keyframes fill {
    0% {
        width: 0;
        height: 5px;
    }

    50% {
        width: 100%;
        height: 5px;
    }

    100% {
        width: 100%;
        height: 100%;
        background: #d1d064;
    }
}
/*** External CSS ***/
@import "normalize.css";

/*** Page ***/
html, body {
    margin: 0;
}

/*** Navigation ***/
.navbar {
    background-color: #ecf0f1;
    text-transform: uppercase;
    border-top: 5px solid #d1d064;
    letter-spacing: 3px;
}

.navbar::after {
    content: '';
    clear: both;
    display: block;
}
.navbar > .main-nav > ul,
li {
    list-style-type: none;
    text-decoration: none;
}

.navbar > .main-nav > ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.navbar > .main-nav > ul > li {
    text-align: center;
    min-width: 175px;
    position: relative;
    display: block;
    float: left;
    border-right: 0.5px solid rgba(170, 170, 170, 0.2);
    border-left: 0.5px solid rgba(170, 170, 170, 0.2);
    display: inline;
}

.navbar > .main-nav > ul > li a {
    display: block;
    color: #7f8c8d;
    text-align: center;
    padding: 20px 16px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-weight: bold;
    font-size: 17px;
}

.navbar > .main-nav > ul > li.active {
    box-shadow: 0 -5px 0 #fff;
}

.navbar > .main-nav > ul > li:hover {
    box-shadow: 0 -5px 0 #d1d064;
    transition: transform 250ms ease-in-out;
}

.navbar > .main-nav {
    max-width: 1480px;
    margin: 0 auto;
    text-align: center;
}
@-webkit-keyframes fill {
    0% {
        width: 0%;
        height: 5px;
    }
    50% {
        width: 100%;
        height: 5px;
    }
    100% {
        width: 100%;
        height: 100%;
        background: #d1d064;
    }
}

nav.fill ul li a {
    position: relative;
}

nav.fill ul li a:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 0%;
    content: ' ';
    color: transparent;
    background: #aaa;
    height: 1px;
}

nav.fill ul li a {
    transition: all 2s;
}

nav.fill ul li a:after {
    text-align: left;
    content: '.';
    margin: 0;
    opacity: 0;
}

nav.fill ul li a:hover {
    color: #fff;
    z-index: 1;
}

nav.fill ul li a:hover:after {
    z-index: -10;
    animation: fill 1s forwards;
    -webkit-animation: fill 1s forwards;
    -moz-animation: fill 1s forwards;
    opacity: 1;
}

/*** Head ***/
.head::after {
    content: '';
    clear: both;
    display: block;
}
.head {
    min-height: 150px;
    display: block;
    width: 100%;
}
.company {
    margin: 0 auto;
    max-width: 1480px;
    font-size: 130px;
    color: #aaa;
    font-family: 'Lato', sans-serif;
    font-weight: lighter;

}
.company > .logo {
    float: left;
    width: auto;
    color: coral;
    text-transform: uppercase;
}
.company > .rightessential {
    float: right;
    width: auto;
    font-size: 20px;
    padding: 20px 20px 0 0;
}

New code after knowing that to use > you have to implement a & follow by the > However it is still not working for me

/*** External CSS ***/
@import "normalize.css";
/*** Page ***/
body,
html {
    margin: 0;
}
/*** Navigation Bar ***/
.navbar {
    background-color: #ecf0f1;
    text-transform: uppercase;
    border-top: 5px solid #d1d064;
    letter-spacing: 3px;

    &::after {
        content: '';
        clear: both;
        display: block;
    }
    & > .main-nav {
        max-width: 1480px;
        margin: 0 auto;
        text-align: center;

        & > li,ul {
            list-style-type: none;
            text-decoration: none;
        }

        & > ul {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

            & > li.active {
                box-shadow: 0 -5px 0 #fff;
            }

            & > li.hover {
                box-shadow: 0 -5px 0 #d1d064;
                transition: transform 250ms ease-in-out;
            }

            & > li {
                text-align: center;
                min-width: 175px;
                position: relative;
                display: block;
                float: left;
                border-right: 0.5px solid rgba(170, 170, 170, 0.2);
                border-left: 0.5px solid rgba (170, 170, 170, 0.2);
                display: inline;

                & > a {
                    display: block;
                    color: #7f8c8d;
                    text-align: center;
                    padding: 20px 16px;
                    text-decoration: none;
                    font-family: 'Oswald', sans-serif;
                    font-weight: bold;
                    font-size: 17px;
                }
            }
        }
    }
}



.fill {
    ul li a {
        position: relative;
        transition: all 2s;
    }

    ul li a:after {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        width: 0;
        content: ' ';
        color: transparent;
        background: #aaa;
        height: 1px;
        text-align: left;
        content: '.';
        margin: 0;
        opacity: 0;
    }

    ul li {
        a:hover {
            color: #fff;
            z-index: 1;
        }

        a:hover:after {
            z-index: -10;
            animation: fill 1s forwards;
            -webkit-animation: fill 1s forwards;
            -moz-animation: fill 1s forwards;
            opacity: 1;
        }
    }
}
@-webkit-keyframes fill {
    0% {
        width: 0;
        height: 5px;
    }

    50% {
        width: 100%;
        height: 5px;
    }

    100% {
        width: 100%;
        height: 100%;
        background: #d1d064;
    }
}
    <nav class="navbar fill">
        <div class="main-nav">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Second</a></li>
                <li><a href="#">Third</a></li>
                <li><a href="#">Fourth</a></li>
                <li><a href="#">Sixth</a></li>
                <li><a href="#">Seventh</a></li>
            </ul>
        </div>
    </nav>

What am I currently doing wrong? I was not able to find a tutorial on using >on their website so was unable to solve it myself.

Thanks

Solved For people who maybe just getting started on SCSS just like me, you don't use the SCSS code in your html file, instead you use the compiled CSS file!

Upvotes: 0

Views: 81

Answers (2)

dave
dave

Reputation: 2945

Nesting in scss will not produce an > when compiled. 

.class {
    .subclass {
        attribute: value;
    }
}

Will compile to

.class .subclass {
    attribute: value;
}

But the & selector will help you out

.class {
    & > .subclass {
        attribute: value;
    }
}

Will compile to

.class > .subclass {
    attribute: value;
}

Upvotes: 1

CaldwellYSR
CaldwellYSR

Reputation: 3196

To use > in SCSS you have to use the & selector. So it would look like .navbar { & > li {} }

Upvotes: 3

Related Questions