html - 没有让 SCSS 正常工作？ (代码更新)

标签 html css sass

我目前正在尝试从 CSS 进行转换至 SCSS如我所见SCSS有嵌套的能力，我认为以这种方式编写代码更容易。但是，我没有让它正常工作。在我的常规 CSS我用了 >签到我想上的课。所以我想也许我在 SCSS 中不需要它.

我的原创CSS代码如下

/*** 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>

以下是我在 SCSS 中尝试做的事情(当然在代码片段中是行不通的)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;
}

知道使用后的新代码>你必须实现 &跟随 >但是它仍然不适合我

/*** 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>

我目前做错了什么？ 我找不到关于使用 > 的教程在他们的网站上，所以我自己无法解决。

谢谢

已解决 对于可能像我一样刚刚开始使用 SCSS 的人，您不要在 html 文件中使用 SCSS 代码，而是使用编译后的 CSS 文件!

最佳答案

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

关于html - 没有让 SCSS 正常工作？ (代码更新)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41291056/

上一篇：html - 如何在CSS中制作一个圆圈并使其响应？

下一篇：html - 除了 FLEXBOX 之外，如何在网站上的单行中将可伸缩元素放在两个固定大小的元素之间？

相关文章：

javascript - 防止网站图像上的 HoverZoom 功能

Javascript/css 转换仅在第一次工作

javascript - 在 Storybook 和 Angular : expected 1 selector or at-rule, 中加载 scss 文件是 "var content = requi"

javascript - 制作一个在页面向下滚动时变得粘滞的导航菜单

php - 在 mPDF 中定位

jquery - 具有响应图像的全屏 flexislider

ruby - SASS --watch 不断失败，检测到已删除的模板

html - 如何从该按钮的中间绘制一条垂直线？

php - 如何在php中编写html代码？

javascript - 单击后闪烁行或在表格单元格中切换

©2024 IT工具网  联系我们