+ 2

CSS Mixin usage?

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?

3rd Dec 2017, 10:19 AM
Phil Cook
Phil Cook - avatar
14 ответов
+ 3
Full codes in Code Playground please.
3rd Dec 2017, 3:28 PM
Calviղ
Calviղ - avatar
+ 2
Cannot use maxin and include in CSS directly. Use SASS preprocessor instead.
3rd Dec 2017, 10:58 AM
Calviղ
Calviղ - avatar
+ 2
You need tools to convert SASS to CSS. HTML can't work directly with SASS.
3rd Dec 2017, 2:18 PM
Calviղ
Calviղ - avatar
+ 1
Just use CSS to style your button.
3rd Dec 2017, 3:12 PM
Calviղ
Calviղ - avatar
0
I assume a quick google will suffice to help me there, thanks!
3rd Dec 2017, 11:40 AM
Phil Cook
Phil Cook - avatar
0
How would I go about using mixin if I wanted to on a computer then?
3rd Dec 2017, 11:41 AM
Phil Cook
Phil Cook - avatar
0
I can’t get SASS to work either: $bgcolor: #FFFFFF; body { background-color: $bgcolor; } Results in no background change
3rd Dec 2017, 11:51 AM
Phil Cook
Phil Cook - avatar
0
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 :/
3rd Dec 2017, 2:24 PM
Phil Cook
Phil Cook - avatar
0
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.
3rd Dec 2017, 3:15 PM
Phil Cook
Phil Cook - avatar
0
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; }
3rd Dec 2017, 3:17 PM
Phil Cook
Phil Cook - avatar
0
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.
3rd Dec 2017, 3:53 PM
Phil Cook
Phil Cook - avatar
3rd Dec 2017, 3:53 PM
Phil Cook
Phil Cook - avatar
3rd Dec 2017, 3:54 PM
Phil Cook
Phil Cook - avatar
0
Button 2 is working.
4th Dec 2017, 12:25 AM
Calviղ
Calviղ - avatar