csssassscss-mixins

How to use scss @include


I have a SCSS file, and I want to @include transition(all, 0.5s); But scss gives

Error message:

Scss compiler Error: no mixin named transition

Here is my SCSS:

a {
  float: left;
  line-height: 70px;
  text-decoration: none;
  color: white;
  @include transition(all, 0.3s);
   &:hover {
     background-color: #444;
     @include transition(all, .5s);
   }
}

Solution

  •  @mixin reset-list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    

    then to use it

    @include reset-list
    

    https://sass-lang.com/documentation/at-rules/mixin

    But I see that you are trying to use parameters in your mixin

    https://www.tutorialspoint.com/sass/arguments.htm#:~:text=Explicit%20keyword%20argument%20can%20be,of%20argument%20can%20be%20omitted.

    @mixin bordered($color, $width: 2px) {
      color: #77C1EF;
      border: $width solid black;
      width: 450px;
    }
    
    .style  {
      @include bordered($color:#77C1EF, $width: 2px);
    }
    

    So in short: Declare your mixin before including it. Your error says that the mixin does not exist

    @mixin transition($includes, $length) {
      transition: $includes $length;
    }
    
    .style  {
      @include transition($includes: all, $length: .2s);
    }