Comments (27)
Just started out with SASS and immediately stumbled upon this. Not sure if I should report a separate bug for:
$mq-wide: "@media (min-width: 1280px)";
#{$mq-wide} {
// code
}
The error I get is
Invalid CSS after "": expected selector, was "@media (min-wid..."
from sass.
In selectors and normal directives, you need to use interpolation #{ ... }
to insert scripted values. E.g.
@-webkit-keyframes #{$name} {
from sass.
Yes, this was something that popped up on my mind too. However, that doesn't work either! The error now is:
Invalid CSS after "...bkit-keyframes ": expected "}", was "#{$name} {"
I think there is an error in the way the @-webkit-keyframes
is parsed. Using the code outside of a mixin (with a global variable) yields another error:
Invalid CSS after "...bkit-keyframes ": expected selector or at-rule, was "#{$name} {"
from sass.
hmm. my mistake, I guess we don't interpolate unknown at-rules. I reopened the issue.
from sass.
This is something we should support, but I don't think it's important enough to fit into 3.1.
from sass.
To me this seems to be quite important. According to #79 using the media bubbling feature currently requires repeating your selectors over and over.
I'd like to do something like this instead:
@media ($iphone) and ($ipad) {
...
}
@media (iphone) {
...
}
@media ($ipad) and ($desktop) {
...
}
from sass.
Ah the issue is that this only works in .sass files. The SCSS parser is choking before interpolation runs.
from sass.
Just impossible to do properly dynamic responsive without this one implemented.
I use this workaround in mentime :
$global-width: 1200px
. container
width: $global-width
...
@if $skeleton_global_width > 1100
@media only screen
@media (min-width: 960px)
@media (max-width: 1009px)
. container
width: 960px
I'd rather do
@media only screen
@media (min-width: 960px)
@media (max-width: $global-width - 1)
. container
width: 960px
from sass.
Another vote for this one on responsive web design grounds, please.
It is very common to want a decision based on @media screen
together with a min-width
or max-width
to select between layouts. Typically, we would then use lengths based on that same width value to size elements within the layout:
#responsive-page-element {
width: $default-layout-width;
@media screen and (min-width: $important-width-value) {
width: $foo * $important-width-value + $bar - $baz;
}
}
Often, there will be several such @media
blocks for each responsive element, based on a series of widths where the layout changes.
Not being able to interpolate the length in the media query here is a significant problem, forcing repetition of those important width values throughout a SCSS file, or across a whole set of files for a larger site instead of storing all core data like that in a single file and @import
ing it elsewhere.
It might be considered a different issue depending on how the parser works, but for what it's worth, I agree that it would be very nice to interpolate an entire media query as well:
@media $ipad {
// ...
}
For me personally this would have a much lower priority, though, because it is far less likely in practice that something like @media screen
is going to change during routine development work.
from sass.
The following (to create the different prefixed keyframes for all browsers) is not possible either :/
@mixin animate($prefix) {
@#{$prefix}keyframes foo {
0% { color: red; }
100% { color: blue; }
}
}
from sass.
I agree too, it's a must-have behavior for responsive designs and flexible development...
from sass.
+1
Would love to do something like that...
@for $i from 1 through 4 {
@media only screen and (max-width: $i * $width) {
width: $width;
}
}
from sass.
+1
I'm trying to do:
@media only screen and (min-width: $mobile-nav-width)
But I get
Line 39: Invalid CSS after "...nd (min-width: ": expected expression (e.g. 1px, bold), was "$mobile-nav-wid..."
from sass.
this is a blocker for building proper animation and media support.
from sass.
Any plan to fix this?
from sass.
Yes.
from sass.
How soon? This is really bugging me (I'm trying to make a keyframes mixin).
from sass.
It'll be fixed in 3.2. As a work around, you can do this in a .sass file -- this bug only affects the .scss syntax
from sass.
#429 is tracking interpolation in all unknown directives.
from sass.
I'm on 3.2.1 and I tried 3.3.0.alpha.3, and i still get the bug using
@mixin keyframes($name) {
@-webkit-keyframes #{$name} {
@content;
}
@-moz-keyframes #{$name} {
@content;
}
@-o-keyframes #{$name} {
@content;
}
@keyframes #{$name} {
@content;
}
}
from sass.
Is it going to get fixed ?
from sass.
This has been fixed and has been working for a while. Go to http://sassmeister.com/ and try the following code:
@mixin animation($animation...) {
@each $prefix in -webkit {
#{$prefix}-animation: $animation;
}
animation: $animation;
}
@mixin keyframe($name) {
@-webkit-keyframe #{$name} {
@content;
}
@keyframe #{$name} {
@content;
}
}
.foo {
@include animation(foo 30s infininte);
}
@include keyframe(foo) {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
For those curious, this is the reason I only have -webkit
in there. Everywhere else it's unprefixed. Opera 2 versions back has the -o
prefix, but opera users tend to be pretty good at upgrading. -moz
is totally unneeded.
And, of course, this works with media queries as well. Take a look at Breakpoint's usage of a full media query interpolation.
Finally, for those still curious as to whether or not this is in, well, here's the official changelog about it getting in.
from sass.
I keep receiving the "Invalid CSS after "@": expected identifier, was "#{$vendor}keyfr...")" error on this code:
@mixin keyframe($keyframe-name) {
$vendors: (-webkit-, -moz-, -o-, -ms-, '');
@each $vendor in $vendors {
@#{$vendor}keyframes #{$keyframe-name} {
@include keyframe-content($vendor);
}
}
}
If I replace with this
#{'@' + $vendor}keyframes #{$keyframe-name} {
then I get this error "Invalid CSS after "": expected selector, was "@-webkit-keyfra...")"
Is this going to be fixed?
from sass.
- You're already using an outside mixin and an inside mixin.
- There are a limited number of prefixes to support.
Thus, while hoping for your feature request to be implemented, you can use an if-elseif-elseif-elseif-else construct to create prefixed keyframes.
from sass.
@QuyHP: you're looking for #966.
from sass.
Is this bug fixed ? I'm on 3.3.7 and I'm trying to use
@mixin keyframes($animation-name) {
@-webkit-keyframes $animation-name {
@content;
}
@-moz-keyframes $animation-name {
@content;
}
@-o-keyframes $animation-name {
@content;
}
@keyframes $animation-name {
@content;
}
}
and I'm getting the same error:
Invalid CSS after "...bkit-keyframes ": expected "}", was "$animation-name {"
In sassmeister seems to work (codepen also)
http://sassmeister.com/gist/bb3f4dd20a9ea0b737ee
I tried to use both simple $ and intrepolation method #{name} but I still get the same error
from sass.
@srekoble I can't reproduce your issue. Must be a very old version of sass you're using this even works in 3.2
from sass.
Related Issues (20)
- Migration from @import to @use and @forward in a scss components library. Willing to pay a consultancy HOT 1
- Migration from @import to @use seems impossible with !default HOT 5
- If Sass also adopts Rust implementation for some implementations, will there be many changes. HOT 1
- How to use $each to set variables HOT 1
- Compatibility with the CSS custom function and mixin proposal HOT 6
- Allow two underscores on index files __index.scss HOT 1
- Node.js Package Importer shouldn't be strict about require.main.filename
- Sass is converting var(--c,) into var(--c) which leads to wrong code HOT 4
- Suggestion: Improve documentation around CSS Layers HOT 6
- Sass break a specific border-image syntax HOT 4
- Handle semicolons as function separators HOT 1
- Support an optional modulus argument to the round() function
- & selector in SCSS and CSS behaves differently HOT 2
- Please remove "free alestine" banner
- Please remove "free Palestine" banner HOT 2
- what is the relation between politics and css? remove that free Palestine immidiatly
- Multi asign, list deconstruction and better support for multiple returns HOT 2
- Generate deprecations list from a single source-of-truth
- Include loaded URLs in failed compilation result HOT 3
- Explicitly allow a base importer without a base URL HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sass.