CODEWITHSUNDEEP
csssass
red house 87
red house 87

Reputation: 2415

First part of Sass code not compiling

I have some Sass code which is only compiling a small part of it. The rest of it will compile to nothing! I can't figure out what is going on and why it won't compile. Please see my comments to see what it does and doesn't compile:

//wont compile from here down to...

@mixin transition($value) {
    transition: $value;
    -webkit-transition: $value;
    -moz-transition: $value;
    -ms-transition: $value;
    -o-transition: $value;    
}

@mixin transform($value) {
    transform: $value;
    -webkit-transform: $value;
    -moz-transform: $value;
    -ms-transform: $value;
    -o-transform: $value;   
}

@mixin animation($value) {
  -webkit-animation: $value;
  -moz-animation: $value; 
  -o-animation: $value; 
-ms-animation: $value; 
  animation: $value; 
}

@mixin animation-delay($value) {
  -webkit-animation-delay: $value; 
  -moz-animation-delay: $value; 
  -o-animation-delay: $value;
    -ms-animation-delay: $value; 
  animation-delay: $value; 
}    

//Here    

//however the below code will compile

@-webkit-keyframes animateMenuItems {
  0%   { @include transform(translateX(-60%));opacity:0;}
  100% { @include transform(translateX(0%));opacity:1;}
}

Any idea where I've gone wrong here?

EDIT

Here is the file where it's supposed to compile:

.App {
    .app-content-wrap {
        background:white;
        @include transition(all 0.2s ease-out);   
        float: left;
        width: 100%;
        -webkit-box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18);
        -moz-box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18);
        box-shadow: -2px -1px 14px -1px rgba(0,0,0,0.18);        
    }
    &.sidenavActive {
        .app-content-wrap {
            transform: translate(300px,50px);
            -webkit-transform: translate(300px,50px);
            opacity:0.8;

        }
    }
}

I'm using webpack and the error i'm getting in the console is this:

"no mixin named transition\n\nBacktrace:\n\tsrc/css/app-containers.scss:4",

Upvotes: 0

Views: 520

Answers (1)

tsmuse
tsmuse

Reputation: 81

Mixin definitions don't compile down into the final CSS, they will only show up when you @include them in a definition. E.g: if you do

body{
  @include transition(foo);
 }

it would show up in your final CSS as:

body{
  transition: foo;
  -webkit-transition: foo;
  -moz-transition: foo;
  -ms-transition: foo;
  -o-transition: foo; 
}

Edit after clarification of question in the comments

It looks like it's an import issue. The imports in Sass are not links like they are in CSS, they literally pull the imported scss code in and compile it down to one file. So if you have a single file, app.scss for example, and you're putting all your mixins in a partial called _mixins.scss, and import the mixin partial first, it should be available to everything else that is being imported to app.scss.

_mixins.scss

@mixin my-rad-mixin(){
    some rad mixin stuff goes here
}

app.scss

@import 'mixins';

.foo{
  @include my-rad-mixin;
}

With this setup everything you write after the import in app.scss, including other Sass imports, should have access to everything in the _mixins partial. It will all compile out to a single app.css (assuming you don't change the name at compile time.)

If, however, you aren't using the partial system but are compiling multiple scss files to css, then you'd have to import the file with the mixin definitions everywhere you want to use the mixin.

Upvotes: 3

Related Questions