Skip to content

Instantly share code, notes, and snippets.

@philoye
Created December 2, 2011 00:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save philoye/1420982 to your computer and use it in GitHub Desktop.
Save philoye/1420982 to your computer and use it in GitHub Desktop.
problem with sass media queries + variables
source :rubygems
gem 'fssm'
gem 'sass', git: 'git://github.com/nex3/sass.git', branch: 'master'
GIT
remote: git://github.com/nex3/sass.git
revision: a6a80a8a594d9a1f904b931ff4facf88bc4908b4
branch: master
specs:
sass (3.2.0.alpha.0)
GEM
remote: http://rubygems.org/
specs:
fssm (0.2.7)
PLATFORMS
ruby
DEPENDENCIES
fssm
sass!
bundle exec sass --watch style.sass:style.css
body {
background-color: #eeeeee; }
.page {
width: 920px;
background-color: white; }
@media screen and (max-width: 320px) {
.page {
width: 100%; } }
@media screen and (max-width: $px) {
.page {
width: 500px; } }
=respond-to($media)
@if $media == phone
@media screen and (max-width: 320px)
@content
@if $media == tablet
@media screen and (max-width: 768px)
@content
=respond-max($px)
@media screen and (max-width: $px)
@content
body
background-color: #eee
.page
width: 920px
background-color: #fff
+respond-to(phone)
width: 100%
+respond-max(768px)
width: 500px
@philoye
Copy link
Author

philoye commented Dec 2, 2011

Line 10 in style.sass is the problem. When you attempt to output a variable, sass passes it along without substituting the value. This happens whether you use interpolation or not.

@ngryman
Copy link

ngryman commented Dec 6, 2011

Interpolation in media queries are not supported since 3.0.17 : http://sass-lang.com/docs/yardoc/file.SASS_CHANGELOG.html.
Since : sass/sass#217 it seems to be supported again (3.2.0).

@philoye
Copy link
Author

philoye commented Dec 6, 2011

This gist is using sass from master (3.2.0.alpha.0, commit: a6a80a8a59 from 29 November, after that pull request) and the interpolation isn't working. In 3.0.17, the changelog says that you would get an error instead of broken CSS, but the above gist shows that is no longer true in 3.2.0.alpha.

But its all cool. I chatted with @nex3 on IRC and he said this is simply not implemented yet, but will be.

@philoye
Copy link
Author

philoye commented Dec 6, 2011

Oops, I didn't read that pull request closely enough. That wasn't merged in at all, but @chriseppstein says an implementation is in the works.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment