Search code examples
csssassgulppug

Sass file styles not being applied?


So I have my imports in a different file collecting the styles of different parts of the webstite. Now the styles of all the pieces are working just fine, except, sidebar.sass For some reason none of the styles I apply in that file are being displayed. I've tried remaking the file and reimporting but it just doesn't seem to work. Please look at the files below to see what i'm doing.

Import file:

@import header.sass
@import header-image.sass
@import homepage-content.sass
@import sidebar.sass
@import footer.sass

sidebar.sass

.siderbar
    @extend .col-xs-12
    .search-location
        @extend .col-xs-12
        color: #96c11f
        .white
            color: white
        .search-bar
            font-size: 12px
            color: #ef7d00
            .input-group
                @extend .col-xs-12
            #custom-search-input
            padding: 3px
            border: solid 1px #E4E4E4
            border-radius: 6px
            background-color: #fff
            #custom-search-input input
                border: 0
                box-shadow: none
            #custom-search-input button
                margin: 2px 0 0 0
                background: none
                box-shadow: none
                border: 0
                color: #666666
                padding: 0 8px 0 10px
                border-left: solid 1px #ccc
            #custom-search-input button:hover
                border: 0
                box-shadow: none
                border-left: solid 1px #ccc
    .new-location
        @extend .col-xs-12
        background-color: #ef7d00
        h1
            color: white
        img
            width: 100%

sidebar.jade

.sidebar
    .search-location
        p Big bread kitchen
        p.white Bij jou in de buurt
        p.search-text zoek op uw postcode
        .search-bar
            #custom-search-input
                .input-group
                    input.form-control.input-lg(type="text", placeholder="Zoek...")
                    span.input-group-btn
                        button.btn.btn-info.btn-lg(type="button")
                            p go
    .new-location
        h1 Nieuwe vesting
        img(src="images/naarden.jpg")
    .order-online
        p.white De lekkerste broodjes en snacks
        h3 Online
            span bestellen
    .save
        h3 Sparen

Map structure: http://prntscr.com/flhmco It was a simple typo, my bad.


Solution

  • It seems like you are defining an incorrect class in sidebar.sass file. In sidebar.jade the first class is .sidebar, but in sidebar.sass it is .siderbar.

    sidebar.sass:

    .sidebar
       @extend .col-xs-12
       ...
    

    sidebar.jade:

    .sidebar
        .search-location
            ...