Prefixing #keyframes mixin? [duplicate] - css

I'm trying to workaround Bourbon not supporting #keyframe by generating my own prefixes version with a Sass loop like this:
$list: '' -ms- -webkit- -moz- -o-
$at: # //at sign
#each $prefix in $list
#{$at}#{$prefix}keyframes moveclouds
from
#{$prefix}transform: translateX(2400px)
to
#{$prefix}transform: translateX(-400px)
and expecting to generate css:
#keyframes moveclouds from {
transform: translateX(2400px);
}
#keyframes moveclouds to {
transform: translateX(-400px);
}
#-moz-keyframes moveclouds from {
-moz-transform: translateX(2400px);
}
#-moz-keyframes moveclouds to {
-moz-transform: translateX(-400px);
}
....
the issue is that I cannot figure out how to force Sass output # (at sign) in start of a line
if I do
$at: # // wont work, error
$at: \# // will generate \#keyframes = not good
$at: "\#" // wont work error
$at: ## // will generate ##keyframes = not good
so anyone got an idea how to output at sign in Sass ?

This simply isn't possible using variable interpolation. You can get around the # assignment like this:
$at: unquote("#"); // either of these will work
$amp: #{"#"};
But then you end up with this error:
error sass/test.scss (Line 4: Invalid CSS after "": expected selector_comma_sequence, was "#-ms-keyframes ...")
Interpolation on #keyframes is not currently supported, but will be in the future. You can track the progress of that on GitHub. In the mean time, you'll have to write out your keyframe information by hand. A simple example looks like this:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} {
#content;
}
#keyframes #{$name} {
#content;
}
}
Usage:
#include keyframes(foo) {
0% {
color: red;
}
100% {
color: blue;
}
}
A more complex example can be found in Eric Meyer's Sass Animation library.

Related

Issue with Sass syntax for #keyframes

I'm having a bit of a problem trying to make this idea work, if it is even possible in Sass syntax. I've seen similiar things being used in SCSS syntax and I've tried multiple things to make it work. All of them failed for now.
This is the code, you can see what the idea behind it is from the code:
#keyframes AdHop($from, $to)
0%
transform: scale($from)
100%
transform: scale($to)
So my question is; Is this even possible to do, if so, how?
You can make a mixin
DEMO
#mixin adHop($from, $to, $name) {
#keyframes #{$name} {
0% { transform: scale($from); }
100% { transform: scale($to); }
}
}
#include adHop(1, 2, cool);
button:hover { animation: cool 1s; }

CSS (Keyframes): Sorry, the at-rule #-moz-keyframes is not implemented

While validating for CSS3, following error can be seen for my Website:
Sorry, the at-rule #-moz-keyframes is not implemented
Below is the CSS code:
Line 16:
#-moz-keyframes spin {
0% {
-moz-transform:rotate(0deg)
}
100% {
-moz-transform:rotate(359deg)
}
}
#-webkit-keyframes spin {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg)
}
}
#-ms-keyframes spin {
0% {
-ms-transform:rotate(0deg)
}
100% {
-ms-transform:rotate(359deg)
}
}
#keyframes spin {
0% {
transform:rotate(0deg)
}
100% {
transform:rotate(359deg)
}
}
.fa-rotate-90 {
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg)
}
I would like to know what kind of CSS validation Error is this and what can be the better solution for this error
According to caniuse, the -moz-animation (and corresponding #-moz-keyframes) was used by Firefox 5-15.
Most likely the validator you're using assumes (rightly) that effectively all serious users (at least 99.65% of Firefox users, even less in the total scope of things) will be using a more modern Firefox than Firefox 15.
As a result, it's pretty safe to leave it out if you're want to remove the "error".

Less don't compile if declare multiple keyframes

If declare a keyframe in a less file is all ok, but if i declare another keyframe(no tiping errors, I just duplicate working keyframe then change the name) less tell me unrecognized input. Instead, with saas have expected "{", was "#keyframes error.
the code:
#keyframes cloud-animation-1 {
from { transform:translate(0px,0);}
to{transform:translate(1000px,0);}
}
#-moz-keyframes cloud-animation-1 {
from {transform:translate(10px,0);}
to{transform:translate(1000px,0);}
}
#-webkit-keyframes cloud-animation-1 {
from {-webkit-transform:translate(0px,0);}
to{-webkit-transform:translate(1000px,0);}
}​
#keyframes 2cloud-animation-2 {
from {transform:translate(10px,0);}
to{transform:translate(1000px,0);}
}
#-moz-keyframes cloud-animation-2 {
from {transform:translate(0px,0);}
to{transform:translate(1000px,0);}
}
#-webkit-keyframes cloud-animation-2 {
from { -webkit-transform:translate(0px,0);}
to{ -webkit-transform:translate(1000px,0);}
}​
Solutions? Have missing something?
Thanks

How to make a Sass mixin declare a non-nested selector on base level?

Sorry for the weird language on the question, but I don't know how to describe it any better. I hope this example makes clear what I want:
scss-syntax
.my-smug-selector {
#include my-smug-mixin(30px);
}
desired css-output
.my-smug-selector{
// some styles
}
.another-smug-selector-on-base-lvl{
// some other styles
}
.smug-non-nested-selector{
// some other styles
}
I'm interested in this in general, but to explain why in the world I would want to do this: I want to have a keyframe-animation defined which gets used by the specified selector, e.g.:
scss-syntax
.my-smug-selector {
#include my-smug-mixin($vars);
}
desired css-output
.my-smug-selector{
animation: most-smugish-animation 5s;
}
#keyframes most-smugish-animation {
from {background:red;}
to {background:yellow;}
}
With Sass 3.3 (which is currently still in development), you could write it like this:
#mixin smugmation() {
animation: most-smugish-animation 5s;
#at-root {
#keyframes most-smugish-animation {
from {background:red;}
to {background:yellow;}
}
}
}
.my-smug-selector {
#include smugmation;
}
Otherwise, you'll have to pass the name of the selector as an argument to the mixin:
#mixin smugmation($sel) {
#{$sel} {
animation: most-smugish-animation 5s;
}
#keyframes most-smugish-animation {
from {background:red;}
to {background:yellow;}
}
}
#include smugmation('.my-smug-selector');

Grouping CSS3 keyframes

I have realized that I can't simple accomplish the same code below by separating by coma #keyframes mymove, #-moz-keyframes mymove, etc... In order for them to work I need to declare it each one separately as below.
Is there any way to group them and make this code shorter?
#keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
#-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
#-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
no, I don't think so, but you could use a CSS language (aka CSS preprocessor) like SASS/SCSS/LESS/... - the output (CSS) would still be the same, but changing something would be much easier!
Check out
http://sass-lang.com/
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
if you're interested - the effort of installing them and setting them up is totally worth it!
EDIT: Using SCSS I did the following:
#mixin keyframes($name) {
#-webkit-keyframes #{$name} { #content; }
#-moz-keyframes #{$name} { #content; }
#keyframes #{$name} { #content; }
}
example of usage:
#include keyframes(pulse) {
0%,100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
Although it should be added that you need the latest pre-release of SASS to be able to nest rules (we have got a "{" inside another "{" rule...) so you should update run "gem install sass --pre" which should get you "sass-3.2.0.alpha.104"

Resources