Really messes up style sheet...

[dallasbpeters]

What am I missing here?

I start with:

.search {
    position: absolute;
    top: 0;
    left: 0;
    list-style: none;
    display: inline-block;
    padding: 1rem;
    background-color: #fff;
    z-index: 5;
    transition: box-shadow .3s ease-in-out;
    ul {
        margin: 0;
        padding: 0;
    }
    li {
        display: inline-block;
        transition: all .3s ease-in-out;
        white-space: nowrap;
        &:not(.trigger) {
            max-width: 0;
            opacity: 0;
        }
    }
    &:hover, &.open {
        box-shadow: 0 0 2px rgba(black,.3);
        li:not(.trigger) {
            max-width: 300px;
            opacity: 1;
        }
    }
    a {
        padding: 0 .5rem;
        &:hover {
            text-decoration: underline;
        }
    }
}

.search-actions {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s linear;
    .search.open & {
        max-height: 600px;
    }
    div {
        width: 39rem;
        padding: 2.8rem 1rem 1.2rem 1.5rem;
    }
    .hidden  {
        display: none;
    }
    .visible {
        display: block;
    }
}

// Icons
.search {
    .ion-ios-search-strong {}
    .ion-close {
        display: none;
        cursor: pointer;
        position: absolute;
        top: 1rem;
        right: 1rem;
        &.visible {
            display: inline-block;
        }
    }
}

// Search input
.search {
    .description {
        margin: 0;
        text-transform: uppercase;
        font-weight: 600;
        font-size: .75rem;
        letter-spacing: .15em;
    }
}
.big-search {
    border: none;
    font-size: 4rem;
    width: 100%;
    font-family: "merriweather";
    font-weight: 200;
    outline: none;
    margin-bottom: .5rem;
}

and it converts it to

.search-actions {
    max-height: 0;
    overflow: hidden;

    transition: max-height .25s linear;

    .search.open & {
        max-height: 600px;
    }

    div {
        width: 39rem;
        padding: 2.8rem 1rem 1.2rem 1.5rem;
    }

    .hidden {
        display: none;
    }

    .visible {
        display: block;
    }
}

// Search input
.search {
    .description {
        margin: 0;

        font-size: .75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .15em;
    }
}

.big-search {
    width: 100%;
    margin-bottom: .5rem;
    border: none;
    outline: none;

    font-family: "merriweather";
    font-size: 4rem;
    font-weight: 200;
}

It's stripping some classes totally from the document.

[AndreasBackx]

This is because there are multiple classes at the same level with the same name. It's confusing these and probably resetting the contents of them somewhere in the code. I'm trying to work on StyleSorter in my free time and work on a rewrite that uses a lexer instead of looping over every character of the file. It should allow for different CSS-like languages and confusion should be rare.

You can get around this atm by only writing 1 .search class on the same level.