I already tried
$prefixes: ("-webkit-","-moz-", "-o-", "");
#mixin keyframes($name) {
#each $prefix in $prefixes {
##{$prefix}keyframes #{$name} { #content; }
}
}
and
#mixin keyframes($name) {
#-webkit-keyframes #{$name} { #content; }
#-moz-keyframes #{$name} { #content; }
#keyframes #{$name} { #content; }
}
any way to do this? Couldn't find any solutions with Google :(
I managed to achieve this effect by updating to SASS 3.2 (pre-release via gem install sass --pre), as a result latter now works!
Related
I'm getting an error while passing the mixins into my scss file, i used the same mixins to my another project and it worked fine. but when i try to use the same mixins i get an error.
here is the code:-
.carousel-wrapper {
padding: 0 0 20px;
#include screen(custom, min, 669) {
padding: 0;
}
.carousel-stage {
transition-timing-function: cubic-bezier(
0.77,
0,
0.175,
1
) !important;
padding-left: 660px;
padding-right: 660px;
width: 6944px;
transition: all 0.6s ease 0s;
}
}
The errors:-
Here is the image of the Error
Here is the Mixins I used:-
///Media Queries
$breakpoint-small: 575.98px;
$breakpoint-med-small: 767.98px;
$breakpoint-med: 991.98px;
$breakpoint-large: 1199.98px;
#mixin screen($size, $type: max, $pixels: $breakpoint-small) {
#if $size == "small" {
#media screen and ($type + -width: $breakpoint-small) {
#content;
}
} #else if $size == "med-small" {
#media screen and ($type + -width: $breakpoint-med-small) {
#content;
}
} #else if $size == "med" {
#media screen and ($type + -width: $breakpoint-med) {
#content;
}
} #else if $size == "large" {
#media screen and ($type + -width: $breakpoint-large) {
#content;
}
} #else if $size == "custom" {
#media screen and ($type + -width: $pixels + px) {
#content;
}
} #else {
#content;
}
}
You mixin seems fine, so it must be a declaration problem.
Is the mixin code inside the same file than the first code ?
If not, you should copy-paste your code in the same file, or import it with #import.
Trying to create a mixin for keyframes which will use an include for a vendor based property.
#mixin vendor($property, $value) {
-webkit-#{$property}: #{$value};
-moz-#{$property}: #{$value};
#{$property}: #{$value};
}
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#-moz-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
#include keyframes(scale) {
0% {
#include vendor(transform, scale(1) );
}
100% {
#include vendor(transform, scale(2) );
}
}
But how to prevent writing unnecessary vendors properties to the vendor based keyframes?
#-moz-keyframes scale {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
...
I want to create mixin/function in sass that will customize my #keyframes animation. It looks like I can do it using this code, but is there a better way?
https://www.sassmeister.com/gist/13a4b5d4df15ca46bd484ab5758f6de0
$animation-name: 1 !global;
#mixin animate_bg($color1, $color2) {
$animation-name: unique-id() !global;
#keyframes #{$animation-name} {
0% {
background-color: $color1;
}
100% {
background-color: $color2;
}
}
#content
}
#include animate_bg(#007efe, #cce5ff) {
a.finished {
animation-duration: 0.25s;
animation-name: $animation-name;
}
}
#include animate_bg(#aabbcc, #ffaabb) {
b.finished {
animation-duration: 0.25s;
animation-name: $animation-name;
}
}
Produces this css
#keyframes uz61m5wd4 {
0% {
background-color: #007efe;
}
100% {
background-color: #cce5ff;
}
}
a.finished {
animation-duration: 0.25s;
animation-name: uz61m5wd4;
}
#keyframes uz61m5wdd {
0% {
background-color: #aabbcc;
}
100% {
background-color: #ffaabb;
}
}
b.finished {
animation-duration: 0.25s;
animation-name: uz61m5wdd;
}
Shrunk the SCSS slightly by including your .finished class in the mixin. Not sure if this is exactly what you were looking for, though.
// mixin:
#mixin animate_bg($color1, $color2, $class, $duration) {
$animation-name: unique-id() !global;
#keyframes #{$animation-name} {
0% {
background-color: $color1;
}
100% {
background-color: $color2;
}
}
.#{$class}.finished {
animation-duration: $duration;
animation-name: $animation-name;
}
}
// using the mixin:
#include animate_bg(#007efe, #cce5ff, a, .25s);
#include animate_bg(#aabbcc, #ffaabb, b, .25s);
I've a problem with following code. Using https://www.sassmeister.com/ for testing I already realized, that it's ok with SASS Version 3.3 but not with Version 3.4. How should I change the code so it will work with the current version.
#mixin keyframes ($animation-name) {
#-webkit-keyframes $animation-name {
#content;
}
#-moz-keyframes $animation-name {
#content;
}
#keyframes $animation-name {
#content;
}
}
#include keyframes(move-up) {
0% {
top: 25px;
opacity: 1;
}
100% {
top: -50px;
opacity: 0;
}
}
The expected output - with V3.3 - should look like
#-webkit-keyframes move-up {
...
}
but with V3.4 I get the following
#-webkit-keyframes $animation-name {
...
}
In SCSS v3.4 you can interpolate in #keyframes with #{}
#mixin keyframes ($animation-name) {
#-webkit-keyframes #{$animation-name} {
#content;
}
#-moz-keyframes #{$animation-name} {
#content;
}
#keyframes #{$animation-name} {
#content;
}
}
#include keyframes(move-up) {
0% {
top: 25px;
opacity: 1;
}
100% {
top: -50px;
opacity: 0;
}
}
I'm trying to use a SASS mixin to automatically use vendor-prefixes on animations. This is the mixin:
#mixin keyframes($name) {
#-o-keyframes $name { #content };
#-moz-keyframes $name { #content };
#-webkit-keyframes $name { #content };
#keyframes $name { #content };
}
Now if I include it like this:
#include keyframes(test) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
The resulting css looks like this:
#-o-keyframes $name { ... }
#-moz-keyframes $name { ... }
#-webkit-keyframes $name { ... }
#keyframes $name { ... }
SASS is simply not replacing the $name with test. Is this a known bug or are there workarounds? I couldn't find anything related to this problem. I'm using SASS version 3.4.1 by the way.
Change $name to #{$name} in the mixin
#mixin keyframes($name) {
#-o-keyframes #{$name} { #content };
#-moz-keyframes #{$name} { #content };
#-webkit-keyframes #{$name} { #content };
#keyframes #{$name} { #content };
}
Demo