没有让SCSS正常工作？ （代码已更新）

时间：2016-12-22 20:18:15

标签： html css sass

我正在尝试从CSS转换为SCSS，因为我看到SCSS有能力进行嵌套，我认为这样做更容易以这种方式编码。但是，我没有让它正常工作。在我的常规CSS中，我使用>符号进入我想要的课程。所以我想也许我不需要SCSS。

我原来的CSS代码如下

＆＃13;
＆＃13; 
/*** 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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

以下是我在SCSS尝试做的事情（当然它在代码片段中不起作用）过时的代码

＆＃13;
＆＃13; 
/*** 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;
    }
}
＆＃13; 
/*** 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;
}
＆＃13;
＆＃13;
＆＃13;

知道要使用>之后的新代码，您必须在[{1}}后面实施&，但它仍然不适用于我

＆＃13;
＆＃13; 
>
＆＃13; 
/*** 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;
    }
}
＆＃13;
＆＃13;
＆＃13;

我目前做错了什么？ 我无法在他们的网站上找到使用 <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>的教程，因此无法自行解决。

由于

解决 对于那些可能就像我一样开始使用SCSS的人来说，你不会在你的html文件中使用SCSS代码，而是使用已编译的CSS文件！

2 个答案:

答案 0 :(得分：3)

要在SCSS中使用>，您必须使用&选择器。所以它看起来像.navbar { & > li {} }

答案 1 :(得分：1)

在编译时，嵌入scss不会产生>。 

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

将编译为

.class .subclass {
    attribute: value;
}

但是&选择器会帮助你

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

将编译为

.class > .subclass {
    attribute: value;
}
相关问题
最新问题