SASS - beginner (small doubt)

Asked

Viewed 48 times

2

Hello! I’m learning SASS and came across a problem that was supposed to be simple,. heehehe.

This is not compiling:

$purple: #9b0aa8;

#fofo{
  width:40px;
  height:40px;
  background: $purple;
}

#fofo:hover{
  @include transform(translateY(50%), scale(0.5));
}
<div id="fofo"></div>

He presents prblema on the line:

`@include transform(translateY(50%), scale(0.5));'

saying: 

  stdin 10:3  root stylesheet on line 10 at column 3

Any idea? Sounds good to me. =//

sass

  • Young test without this comma between translateY(50%), Scale(0.5), thus @include transform(translateY(50%) scale(0.5)) and see if it compiles. If it works out tell me that I publish as an answer ok :)

  • No. = / I had initially done without. Valeu!

  • I’m using https://www.sassmeister.com/

  • Jeez, now gave: Undefined mixin. stdin 10:3 root stylesheet on line 10 at column 3

  • Take a look at the code I put in the answer, compiled without errors!

1 answer

3


I believe that you should first create your @mixin, and then do @include as you can see in the tab: https://sass-lang.com/guide

Thus:

$purple: #9b0aa8;

@mixin transform($property, $propertyx) {
  transform: $property, $propertyx;
}

#fofo{
  width:40px;
  height:40px;
  background: $purple;
}

#fofo:hover{
  @include transform(rotate(30deg), scale(0.5));
}

You can test here that you will see that you will compile well https://www.sassmeister.com/

  • Aaah ok, the tutorial I was following didn’t seem necessary to create the mixin. Hello, thank you!

  • 1

    @Rpgdeividpacheco I am not an expert on rss SCSS, may have another way, but what I can guarantee is that the way I did it will not go wrong... but it may not be the best way to do rss. From the Guide it seemed to me to do so...

Browser other questions tagged sass

You are not signed in. Login or sign up in order to post.