【问题标题】:SCSS Won't Compile, Throwing an ErrorSCSS 无法编译,抛出错误
【发布时间】:2018-06-09 14:42:08
【问题描述】:
.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
}

错误:

模块构建失败:} ^ “}”之后的无效 CSS:预期的选择器或规则,是“}” 在 /Users/me/Code/builder/resources/assets/sass/wizard/_wizard.scss (第 155 行,第 3 列)

有没有人看到这个块的问题,因为它对我来说看起来不错?

【问题讨论】:

    标签: css sass


    【解决方案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
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-10-31
      • 2018-05-16
      • 1970-01-01
      • 1970-01-01
      • 2018-04-27
      • 1970-01-01
      相关资源
      最近更新 更多