css - SCSS 无法编译，抛出错误

Question

.sw-theme-default {
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);

    .sw-container {
        min-height: 250px;
    }

    .step-content {
        padding: 10px;
        border: 0px solid #D4D4D4;
        background-color: #FFF;
        text-align: left;
    }

    .sw-toolbar {
        background: #f9f9f9;
        border-radius: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
        padding: 10px;
        margin-bottom: 0 !important
    }

    .sw-toolbar-top {
        border-bottom-color: #ddd !important;
    }

    .sw-toolbar-bottom {
        border-top-color: #ddd !important;
    }

    > ul.step-anchor {
        > li {
            position: relative;
            margin-right: 2px;

            > a,
            > a:hover {
                border: none !important;
                color: #bbb;
                text-decoration: none;
                outline-style: none;
                background: transparent !important;
                border: none !important;
                cursor: not-allowed;
            }

            > a::after {
                content: "";
                background: #4285F4;
                height: 2px;
                position: absolute;
                width: 100%;
                left: 0px;
                bottom: 0px;
                -webkit-transition: all 250ms ease 0s;
                transition: all 250ms ease 0s;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
            }

            &.clickable {
                > a:hover {
                    color: #4285F4 !important;
                    background: transparent !important;
                    cursor: pointer;
                }
            }

            &.active {
                > a {
                    border: none !important;
                    color: #4285F4 !important;
                    background: transparent !important;
                    cursor: pointer;

                    &::after {
                        -webkit-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);                    
                    }
                }

            }

            &.done {
                > a {
                    border: none !important;
                    color: #000 !important;
                    background: transparent !important;
                    cursor: pointer;

                    &::after {
                        background: #5cb85c;
                        -webkit-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                    }
                }
            }

            &.danger {
                > a {
                    border: none !important;
                    color: #d9534f !important;
                    /* background: #d9534f !important; */
                    cursor: pointer;

                    &::after {
                        background: #d9534f;
                        border-left-color: #f8d7da;
                        -webkit-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);                    
                    }
                }
            }

            &.disabled {
                > a,
                > a:hover {
                    color: #eee !important;
                    cursor: not-allowed;                        
                    }
                }
            }
        }
    } // this is line 155 of my file noted in the error
}

错误:

Module build failed: } ^ Invalid CSS after " }": expected selector or at-rule, was "}" in /Users/me/Code/builder/resources/assets/sass/wizard/_wizard.scss (line 155, column 3)

有没有人看到这个 block 的问题，因为它对我来说看起来不错？

Answer 1

您的代码中似乎有一个额外的 {。从出现错误的行中删除大括号。 scss 已经为我编译好了

试试下面的 scss

.sw-theme-default {
    -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);

    .sw-container {
        min-height: 250px;
    }

    .step-content {
        padding: 10px;
        border: 0px solid #D4D4D4;
        background-color: #FFF;
        text-align: left;
    }

    .sw-toolbar {
        background: #f9f9f9;
        border-radius: 0 !important;
        padding-left: 10px;
        padding-right: 10px;
        padding: 10px;
        margin-bottom: 0 !important
    }

    .sw-toolbar-top {
        border-bottom-color: #ddd !important;
    }

    .sw-toolbar-bottom {
        border-top-color: #ddd !important;
    }

    > ul.step-anchor {
        > li {
            position: relative;
            margin-right: 2px;

            > a,
            > a:hover {
                border: none !important;
                color: #bbb;
                text-decoration: none;
                outline-style: none;
                background: transparent !important;
                border: none !important;
                cursor: not-allowed;
            }

            > a::after {
                content: "";
                background: #4285F4;
                height: 2px;
                position: absolute;
                width: 100%;
                left: 0px;
                bottom: 0px;
                -webkit-transition: all 250ms ease 0s;
                transition: all 250ms ease 0s;
                -webkit-transform: scale(0);
                -ms-transform: scale(0);
                transform: scale(0);
            }

            &.clickable {
                > a:hover {
                    color: #4285F4 !important;
                    background: transparent !important;
                    cursor: pointer;
                }
            }

            &.active {
                > a {
                    border: none !important;
                    color: #4285F4 !important;
                    background: transparent !important;
                    cursor: pointer;

                    &::after {
                        -webkit-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);                    
                    }
                }

            }

            &.done {
                > a {
                    border: none !important;
                    color: #000 !important;
                    background: transparent !important;
                    cursor: pointer;

                    &::after {
                        background: #5cb85c;
                        -webkit-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);
                    }
                }
            }

            &.danger {
                > a {
                    border: none !important;
                    color: #d9534f !important;
                    /* background: #d9534f !important; */
                    cursor: pointer;

                    &::after {
                        background: #d9534f;
                        border-left-color: #f8d7da;
                        -webkit-transform: scale(1);
                        -ms-transform: scale(1);
                        transform: scale(1);                    
                    }
                }
            }

            &.disabled {
                > a,
                > a:hover {
                    color: #eee !important;
                    cursor: not-allowed;                        
                    }
                }
            }
        } // this is line 155 of my file noted in the error
}