Undefined variable: "$small-and-down"

[Bilkhaan]

Hi, i have followed the exact steps mentioned in read me file. I have renamed application.css to application.css.scss. Content of my application.css.scss is

 /*
 *= require_self
 *= require_tree .
 */

@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';

And i am trying to use variable small-and-down in my devise.sass stylesheet, but it gives me error. The content for devise.sass file is

body.devise
  .container
    margin-top: 60px
    margin-bottom: 60px
  @media #{$small-and-down}
    #forgot-password
      h5
        font-size: 15px

I think there is some problem with using "*= require_tree ." . Can you please suggest/fix this problem. Thanks

[Bilkhaan]

Hi, i have tried this piece of code in application.css.scss and it worked as expected. Can you please confirm that if it is the only solution for it.

@import "materialize/components/color";
$primary-color: color("blue", "lighten-2") !default;
@import 'materialize';
/*
 *= require_self
 */
@import "./*";

Thanks

[marisancans]

I have the same problem: @import "materialize/components/color"; $primary-color: color("blue-grey", "darken-1") !default; @import "materialize"; @import "materialize/extras/nouislider";

@import "font-awesome-sprockets"; @import "font-awesome";

/ = require_self */

[mkhairi]

hi, @Bilkhaan , @marisancans Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native @import directive which sass-rails has customized to integrate with the conventions of your Rails projects.

see sass-rails#important-note also see guide

[Bilkhaan]

Hi, @mkhairi , yes i have used the @import directive and it did work fine. It will be helpful if we put this somewhere in read me so that others can take benefit from it. Thanks for your help. Much appreciated.