This question already has an answer here:
Sass won't compile because of an "invisible" error
(1 answer)
Closed 7 years ago.
I have a basic scss file that contains (among other things) this:
#keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-moz-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-webkit-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
#-ms-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
// <--- Error thrown on this line
#-o-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
When trying to compile, I get an invalid top level expression on the line that I indicated in my code above. Okay, so I tried removing the following code:
#-ms-keyframes fade{
0% { opacity: 0; }
100% { opacity: 1; }
}
And now it compiles just fine. Why would sass have an issue with this block of code? I'm using node-sass (libsass 3.2).
I think you may have copy pasted an accidental character in your SASS or someone is purposely messing with you. Your SASS compiles perfectly fine on SassMeister with Libsass 3.1.0. Notice however if you copy paste your code snippet into SassMeister, you get this weird unknown character right where the error is thrown. Upon further inspection there was a entity in your code snippet on here. So... That's either an SO bug or an accidental copy paste.
...please tell I'm not insane.
Related
Using SCSS I was wondering if there if any more elegant way (using the &) to modify a child based on the parent adding a certain class.
The only way I found is this one: CSS - modify parent based on first child
This is what works (based on the answer above):
.parent {
.child {
opacity: 0.5;
}
}
.parent.certain-class {
.child {
opacity: 1.0;
}
}
What I would like to do is something like that:
.parent {
.child {
opacity: 0.5;
collapsed& {
opacity: 1.0;
}
}
}
Is there any way to achieve this in SCSS?
Yes there is a way to do it in scss.
Using the & followed by a classname without space.
Check Example below.
.parent {
.child {
opacity: 0.5;
}
&.certain-class {
.child {
opacity: 1.0;
}
}
I'm trying to remove some duplication in my scss selector.
.container {
.operation {
color: green;
}
.row.is-active &,
.row:hover & {
.operation {
color: inherit;
}
}
}
I tried rewriting it like this:
.container {
.operation {
color: green;
}
.row & {
&.is-active, &:hover {
.operation {
color: inherit;
}
}
}
}
However, this causes .is-active to be applied to .container instead of .row
How can I target the syntactical parent when using the ampersand ?
I took some time to answer the question again, as I mis-understood it initially. Unfortunately there is absolutely no way possible to do this in SASS at the moment. Even when trying to make use of the more advanced SASS functions to manipulate selectors and strings it is not possible.
There is some Good News
It is possible to do using Stylus.
I have created a live Example on codepen.
// Stylus - not SASS
.container {
.operation {
color: green;
}
.row {
^[-1..-1]:is-active ^[0], ^[-1..-1]:hover ^[0] {
.operation {
color: inherit;
}
}
}
}
I hope this helps you in some way, at the very least it might provide you with an option, but unfortunately SASS cannot achieve what you are attempting.
I've installed Foundation 6 for Sites using SASS and I'm compiling with Gulp. I'm trying to use the Motion-UI library for some animation effects, and I've got a lot of it working.
Working Demo of Pre-built Animations:
http://jsfiddle.net/4a9kux0r/7/
The problem I'm having is trying to use the SASS mixins available for the Motion-UI library to create custom effects.
I have the following in my Gulpfile in order to process it...
var PATHS = {
...
sass: [
'bower_components/foundation-sites/scss',
'bower_components/motion-ui/src/'
],
...
};
So, with this in mind, the rest of my .scss files I'm using are set up into partials:
and my app.scss file...
#import 'settings';
#import 'foundation';
#import 'motion-ui';
...
#include motion-ui-transitions;
#include motion-ui-animations;
#import 'partials/base';
#import 'partials/typography';
#import 'partials/utilities';
#import 'partials/animations';
So, all said and done, an animation that is pre-built is working fine, such as:
MotionUI.animateOut($('#foo'), 'fade-in');
But if I try to make a custom mixin for it to combine effects, like this SASS I've placed into my _animations.scss partial
.combineAnimate {
#include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
}
Something like this isn't working...
MotionUI.animateOut($('#foo'), 'combineAnimate');
It's probably just something in where I'm defining the custom animation, or not importing something properly, etc. This is my first time using gulp and foundation 6 and I'm still trying to piece it all together, so any help is sincerely appreciated!
Docs: https://github.com/zurb/motion-ui/blob/master/docs/animations.md
It is only compiling into this css code:
.combineAnimate {
-webkit-animation-name: custom-1;
animation-name: custom-1; }
#-webkit-keyframes custom-1 {
0% {
opacity: 0;
-webkit-transform: rotate(-1turn) translateY(120%);
transform: rotate(-1turn) translateY(120%); }
100% {
opacity: 1;
-webkit-transform: rotate(0) translateY(0);
transform: rotate(0) translateY(0); } }
#keyframes custom-1 {
0% {
opacity: 0;
-webkit-transform: rotate(-1turn) translateY(120%);
transform: rotate(-1turn) translateY(120%); }
100% {
opacity: 1;
-webkit-transform: rotate(0) translateY(0);
transform: rotate(0) translateY(0); } }
As stated in the official documentation for Motion-UI plugin:
"Note that in order to play properly, the element must have at least the property animation-duration applied to it as well."
Being new to CSS3 Animations, I had ignored this very bold stated prerequisite. My SASS was compiling just fine.
#include motion-ui-transitions;
.combineAnimate {
#include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
animate-duration: 2s;
}
Resolves the issue.
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.
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.