I can't seem to generate an opacity helper classes with this code
#for $o from 1 through 9 {
.o#{$o} {
opacity: 0.#{$o};
}
}
i think it has something to do with the value of the opacity 0.#{$o};...
the code should generate:
.o10 { opacity: 0.1; }
.o20 { opacity: 0.1; }
...
.o90 { opacity: 0.9; }
Just divide by 10: opacity: $o / 10;.
#for $o from 1 through 9 {
.o#{$o} {
opacity: $o / 10;
}
}
Sassmeister demo.
Opacity as string example: opacity: unquote("0." + $o);.
Related
#mixin fade($num:1, $fade:1, $visible:2) {
#keyframes fade {
0% { opacity: 0; }
#{ $a }% { opacity: 1; }
#{$a * ($fade + $visible)}% { opacity: 1; }
#{$a * ($fade + $visible + $fade)}% { opacity: 0; }
100% { opacity: 0; }
}
}
Im getting the error } expectedscss(css-rcurlyexpected)
It works if i just type the percentages so I think its something to do with how im substituting the variables in
You are converting your number to a percentage improperly.
#mixin fade($num:1, $fade:1, $visible:2) {
#keyframes fade {
0% { opacity: 0; }
#{($num)}% { opacity: 1; }
#{($num * ($fade + $visible))}% { opacity: 1; }
#{($num * ($fade + $visible + $fade))}% { opacity: 0; }
100% { opacity: 0; }
}
}
I have an animation that gets applied to all the .wave children of an element:
.waves > .wave {
animation: wave 0.5s 2 alternate;
}
And I am using a Sass for loop to cycle through all of the waves and apply a property, say, animation-delay.
#for $i from 1 to 31 {
.wave:nth-child(#{$i}) {
animation-delay: 0.5s * $i;
}
}
I want to set a variable using $i that gets used in the keyframes.
#for $i from 1 to 31 {
.wave:nth-child(#{$i}) {
$max: 0.8 * $i;
}
}
#keyframes wave {
from {
transform: scaleY(0);
}
to {
transform: scaleY($max);
}
}
So I am trying to get an fade in effect where I want the fade in opacity to start off from 0 and go to 1 but then when it gets played the second time I want it to start from 0.5 and get played to 1. If you need more explanation then please let me know. I have inserted the code below. Thanks
#-webkit-keyframes fadeInCustom {
0% {
opacity: 0;
}
1%{
opacity: 0.1;
}
10%{
opacity: 0.2;
}
30% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
#keyframes fadeInCustom {
0% {
opacity: 0;
}
1%{
opacity: 0.1;
}
10%{
opacity: 0.2;
}
30% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
I have this Less mixin:
.keyframes (#name, #fromRules, #toRules) {
#-webkit-keyframes ~'#{name}' { from { #fromRules(); } to { #toRules(); } }
#keyframes ~'#{name}' { from { #fromRules(); } to { #toRules(); } }
}
I call for example:
.keyframes(fade-in,
{
opacity: 0;
},
{
opacity: 1;
}
);
The result is:
#-webkit-keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
But how can I use Less mixins so I can use keyframes-selector different from 0%, 100% and also more than 2 keyframes-selector so result will look like this:
#keyframes fade-in {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
Thanks for help.
You could achieve this by passing the rules for the entire list of keyframe selectors (like 0%, 50%, 100% etc) as a single rule-set to the mixin along with the name of the animation.
Also as mentioned by seven-phases-max in the comments, #-webkit-keyframes ~'#{name}' is not required and it can simply be written as #-webkit-keyframes #name.
.keyframes (#name, #rules) {
#-webkit-keyframes #name { #rules(); }
#keyframes #name { #rules(); }
}
div{
.keyframes(fade-in,
{
0% { opacity: 0;}
50% { opacity: 1;}
100% { opacity: 0;}
});
}
CodePen Demo - Click on the eye icon in the CSS box to see the compiled output.
Note:
Passing rulesets to a mixin was introduced in Less v1.7.0 and hence the above code will not work with lower versions.
I have this code in Stylus:
for i in (1..3)
.l:nth-child({i})
opacity (i / 5)
Which outputs:
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
Which is great, but I want to change this so that the opacity is 0 at the start and to be set after using #keyframes dynamically;
#keyframes o
0%
opacity 0
100%
for i in (1..3)
opacity (i / 5)
Returns, the obviously incorrect:
100% {
opacity: 0.2;
opacity: 0.4;
opacity: 0.6;
}
Not sure how to do this, do I need to use a function? Thanks for your time! The result I want should look like this:
100% {
.l:nth-child(1) {
opacity: 0.2;
}
.l:nth-child(2) {
opacity: 0.4;
}
.l:nth-child(3) {
opacity: 0.6;
}
}
I did it by creating a keyframe for each iteration:
for i in (1..3)
$keyframe-name = (o- + i)
#keyframes {$keyframe-name}
0%
100%
opacity (i/5)
And then animating:
for i in (1..3)
.l:nth-child({i})
opacity 0
animation (o- + i) 0.25s (i/5)s linear forwards
Thanks #DJDavid98 for your comment.