CSS Mixin usage?

Question

Is it not possible to use mixin using the apps compiler?

I.e.:
@mixin bgcolor {
background: red;
}

Body {
/*Not sure which I’m meant to use, seen both of these online but neither work*/
Include: bgcolor;
@include bgcolor;
}

Nothing happens?

What am I doing wrong?

Answer 1

Full codes in Code Playground please.

Answer 2

Cannot use maxin and include in CSS directly.
Use SASS preprocessor instead.

Answer 3

You need tools to convert SASS to CSS. HTML can't work directly with SASS.

Answer 4

Just use CSS to style your button.

Answer 5

I assume a quick google will suffice to help me there, thanks!

Answer 6

How would I go about using mixin if I wanted to on a computer then?

Answer 7

I can’t get SASS to work either:

$bgcolor: #FFFFFF;

body {
background-color: $bgcolor;
}

Results in no background change

Answer 8

Ah ok, so I'm at an impasse really, I need to invest in a laptop in order to develop my css buttons any further :/

Answer 9

I can’t seem to figure out a way to do it. I’m trying to make half of the button text slide down, and a star appear at the top on hover.

Answer 10

This is what I have:

nav ul li a div.icon {
position:absolute;
top:-60px;
color:#fff;
padding:0px;
background-color:red;
transition: 1s;
overflow: hiddden;
}

nav ul li a div.icon:hover {
top:0;
overflow: fill;
}

Answer 11

Just released them to public. Animated buttons 2 is the one I’m trying at the moment.
Animated buttons uses the @mixin SCSS convention from a working example online. It does what I’m trying to achieve (online in the example), but obviously won’t compile as we have discussed.

Answer 12

Animated buttons 2: https://code.sololearn.com/W2iBpL5Tu1b6/?ref=app

Answer 13

Animated buttons: https://code.sololearn.com/W0WhqHR4T41s/?ref=app

Answer 14

Button 2 is working.