SASS: Unable to compile SCSS variables and media queries

[binarytrance]

Problem

I am just getting started with Shopify/Slate so i would do my best to explain my problem. Please do ask if you need any specific information with regards to the description or the replication of my problem. Now,

Uncompiled variables: I am trying to declare SASS variables in the file called variables.scss.liquid but its not getting compiled to valid css values. For example, if i have a variable called $black: #333 in the aforementioned file and i use it in my scss files as color: $black; the dev tools, after compiling shows color: $black instead of color: #333. I have the variables.scss.liquid file imported into the theme.scss file like so: @import url('settings/variables.scss.liquid'); and i have included the theme.scss file in my theme.liquid file like so {{ 'theme.scss' | asset_url | stylesheet_tag }}

Uncompiled media queries:

.navbar {
    z-index: 6;
    // ERROR TODO: sass like syntax doesnt compile to valid css
    // @media (min-width: 992px) {
    //  .navbar {
    //      display: block;
    //      padding: 40px 15px;
    //      transition: all .25s ease;
    //  }
    // }

        // ERROR TODO: sass like syntax doesnt compile to valid css
       @include media-query($medium-up) {
    .navbar {
        padding: 40px 15px;
        transition: all .25s ease;
         }
      }
    &.is-scrolled {
        padding: 15px;

        .navbar-brand {
            a {
                               // DOESNT WORK
                @media(min-width: $sm) {
                    width: 150px;           
                }}}}
          } // END OF .navbar css block

// media queries defined outside of class blocks
// ERROR TODO: sass like syntax doesnt compile to valid css
@include media-query($medium-up) {
    .navbar {
        padding: 40px 15px;
        transition: all .25s ease;
    }
}
// Normal css way of writing media queries. WORKS!
@media (min-width: 992px) {
    .navbar {
        // display: block;
        padding: 40px 15px;
        transition: all .25s ease;
    }
}

in the console, the above code shows up like so:

.navbar {
    display: block;
    background: $black;
    color: #fff;
    padding: 30px 15px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 6;
    @media (min-width: 992px) {;
    .navbar {: ;
    display: block;
    padding: 40px 15px;
    transition: all .25s ease;
    }: ;
    }: ;
    &.is-open {: ;
    .navbar-links {: ;
    transform: translate(0, 0);
    }: ;
    .nav-pages {: ;
    display: block;
    @media(min-width: $md) {;
    display: flex;
    }: ;
    }: ;
    }: ;
    &.is-scrolled {: ;
    padding: 15px;
    .navbar-brand {: ;
    a {: ;
    @media(min-width: $sm) {;
    width: 150px;
    }: ;
    @media(min-width: $md) {;
    width: 180px;
    }: ;
    }: ;
    }: ;
    @media(min-width: $md) {;
    padding: 20px 15px;
    }: ;
    }: ;
}

I am running the regular slate commands in vscode terminal: slate watch, slate start.

Any help will be much appreciated.

[t-kelly]

Hey @binarytrance -- if you are using the .scss.liquid extension, the styles are compiled on Shopify servers since we can't compile liquid files locally. Basically, shopify servers compile scss.liquid to .scss and then to .css -- this is why things don't look compiled when you build locally.

If you wish compile locally (and we encourage you to do so), use .scss files. Please rease the Styles with Liquid for all the info you should need.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.